canvas 圆角矩形填充_Canvas 学习2 (矩形,虚线矩形,圆角矩形)

1 draw() {2 /** @type {HTMLCanvasElement}*/

3 var canvas = document.getElementById("tutorial");4 var ctx = canvas.getContext("2d");5 canvas.width =document.documentElement.clientWidth;6 canvas.height =document.documentElement.clientHeight;7 this.strokeRoundRect(ctx, 10, 10, 100, 100, 10);8 this.fillRoundRect(ctx, 200, 10, 100, 100, 10, "rgba(0,0,0,0.7)");9 //this.bar(250, 150, 100, Math.PI * 2, false, "#222", "blue");

10 //this.drawDashRect(100, 100, 220, 220);

11 },12

13 drawDashLine([x1, y1], [x2, y2], step = 5) {14 var canvas = document.getElementById("tutorial");15 var ctx = canvas.getContext("2d"); //获得画笔

16 const x = x2 -x1,17 y = y2 -y1,18 count = Math.floor(Math.sqrt(x * x + y * y) /step),19 xv = x /count,20 yv = y /count;21 ctx.beginPath();22 for (let i = 0; i < count; i++)