<template> <canvas id="drawLine2" width="800" height="100"/> </template> <script lang="ts"> import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib"; import { Component, Vue } from "vue-property-decorator"; class TestView extends SCanvasView { /** * 构造函数 */ constructor() { super("drawLine2") } /** * Item 绘制操作 * @param canvas 绘制对象 */ onDraw(canvas: SPainter): void { // 在此编写绘制操作相关命令 canvas.drawLine(0, 0, 100, 100); canvas.pen.lineWidth = 1; canvas.pen.color = SColor.Blue; // 长度为 360 ,以10递增绘制一条线段 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; // 长度为 360 ,以10递增绘制一条线段 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)); } } } @Component export default class DrawLine2 extends Vue { /** * 页面挂载 */ mounted(): void { new TestView(); } } </script>