DrawLine1.vue 820 B

12345678910111213141516171819202122232425262728293031323334
  1. <template>
  2. <canvas id="drawLine1" width="800" height="100" />
  3. </template>
  4. <script lang="ts">
  5. import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
  6. class TestView extends SCanvasView {
  7. constructor() {
  8. super("drawLine1")
  9. }
  10. onDraw(canvas: SPainter): void {
  11. // 清除画布
  12. canvas.clearRect(0,0,800,100);
  13. // 在此编写绘制操作相关命令
  14. canvas.drawLine(0,0, 100, 100);
  15. canvas.pen.lineWidth = 1;
  16. canvas.pen.dashOffset = new Date().getTime()/50%60;
  17. canvas.pen.lineDash = [10,50];
  18. canvas.drawLine(200, 50, 400, 50);
  19. this.update();
  20. }
  21. }
  22. export default {
  23. mounted() {
  24. new TestView();
  25. }
  26. }
  27. </script>