<template> <canvas id="drawLine1" width="800" height="100" /> </template> <script lang="ts"> import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib"; class TestView extends SCanvasView { constructor() { super("drawLine1") } onDraw(canvas: SPainter): void { // 清除画布 canvas.clearRect(0,0,800,100); // 在此编写绘制操作相关命令 canvas.drawLine(0,0, 100, 100); canvas.pen.lineWidth = 1; canvas.pen.color = SColor.Blue; for (let i = 0; i < 360; i += 10) { let q = i * Math.PI / 180; canvas.drawLine( 200, 50, 200 + 50 * Math.cos(q), 50 + 50 * Math.sin(q)); } canvas.pen.color = SColor.Red; for (let i = 0; i < 360; i += 10) { let q1 = i * Math.PI / 180; let q2 = (i + 120) * Math.PI / 180; canvas.drawLine( 350 + 50 * Math.cos(q1), 50 + 50 * Math.sin(q1), 350 + 50 * Math.cos(q2), 50 + 50 * Math.sin(q2)); } canvas.pen.color = new SColor('#03a9f4'); canvas.pen.lineWidth = 5; canvas.drawLine(450, 50, 700, 50); canvas.pen.lineWidth = 3; canvas.pen.dashOffset = new Date().getTime()/50%80; canvas.pen.lineDash = [30,50]; canvas.pen.color = SColor.White; canvas.drawLine(450, 50, 700, 50); this.update(); } } export default { mounted() { new TestView(); } } </script>