<template> <canvas height="250" id="circle" width="740"/> </template> <script lang="ts"> import { SCanvasView, SColor, SLineCapStyle, SPainter, SRect } from "@persagy-web/draw/lib"; import { Component, Vue } from "vue-property-decorator"; /** * 绘制圆形 * * @author 郝洁 <haojie@persagy.com> */ class TestView extends SCanvasView { /** * 构造函数 */ constructor() { super("circle") } /** * Item 绘制操作 * @param canvas 绘制对象 */ onDraw(canvas: SPainter): void { canvas.clearRect(new SRect(0, 0, 800, 400)); canvas.pen.color = SColor.Blue; canvas.brush.color = SColor.Red; canvas.drawCircle(100, 100, 50); canvas.pen.lineWidth = 10; canvas.pen.lineDash = [10, 11]; canvas.pen.lineCapStyle = SLineCapStyle.Butt; canvas.pen.color = new SColor("#585858"); canvas.brush.color = new SColor("#585858"); canvas.pen.dashOffset = new Date().getTime() / 50 % 60; canvas.drawCircle(230, 100, 40); canvas.pen.dashOffset = -new Date().getTime() / 50 % 60; canvas.drawCircle(315, 100, 40); canvas.pen.color = SColor.Transparent; canvas.brush.color = SColor.White; canvas.drawCircle(230, 100, 15); canvas.drawCircle(315, 100, 15); 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( 450 + 50 * Math.cos(q1), 100 + 50 * Math.sin(q1), 450 + 50 * Math.cos(q2), 100 + 50 * Math.sin(q2)); } canvas.pen.color = SColor.Blue; // 长度为 360 ,以10递增绘制直线 for (let i = 0; i < 360; i += 10) { let q = i * Math.PI / 180; canvas.drawLine( 650, 100, 650 + 50 * Math.cos(q), 100 + 50 * Math.sin(q)); } this.update(); } } @Component export default class Circle1 extends Vue { /** * 页面挂载 */ mounted(): void { new TestView(); } } </script> <style scoped> </style>