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++) {23 if (i % 2 === 0) {24 ctx.moveTo(x1, y1);25 } else{26 ctx.lineTo(x1, y1);27 }28 x1 +=xv;29 y1 +=yv;30 }31 ctx.lineTo(x2, y2);32 },33 drawDashRect(left, top, width, height, step = 5) {34 var canvas = document.getElementById("tutorial");35 var ctx = canvas.getContext("2d"); //获得画笔

36 this.drawDashLine([left, top], [left +width, top], step);37 ctx.stroke();38 this.drawDashLine(39 [left +width, top],40 [left + width, top +height],41 step42 );43 ctx.stroke();44 this.drawDashLine(45 [left + width, top +height],46 [left, top +height],47 step48 );49 ctx.stroke();50 this.drawDashLine([left, top +height], [left, top], step);51 ctx.stroke();52 },53

54 /**该方法用来绘制一个有填充色的圆角矩形55 *@param cxt:canvas的上下文环境56 *@param x:左上角x轴坐标57 *@param y:左上角y轴坐标58 *@param width:矩形的宽度59 *@param height:矩形的高度60 *@param radius:圆的半径61 *@param fillColor:填充颜色62 **/

63 fillRoundRect(cxt, x, y, width, height, radius, /*optional*/fillColor) {64 var canvas = document.getElementById("tutorial");65 var ctx = canvas.getContext("2d"); //获得画笔

66 //圆的直径必然要小于矩形的宽高

67 if (2 * radius > width || 2 * radius >height) {68 return false;69 }70

71 cxt.save();72 cxt.translate(x, y);73 //绘制圆角矩形的各个边

74 this.drawRoundRectPath(cxt, width, height, radius);75 cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值

76 cxt.fill();77 cxt.restore();78 },79

80 /**该方法用来绘制圆角矩形81 *@param cxt:canvas的上下文环境82 *@param x:左上角x轴坐标83 *@param y:左上角y轴坐标84 *@param width:矩形的宽度85 *@param height:矩形的高度86 *@param radius:圆的半径87 *@param lineWidth:线条粗细88 *@param strokeColor:线条颜色89 **/

90 strokeRoundRect(91 cxt,92 x,93 y,94 width,95 height,96 radius,97 /*optional*/lineWidth,98 /*optional*/strokeColor99 ) {100 var canvas = document.getElementById("tutorial");101 var ctx = canvas.getContext("2d"); //获得画笔

102 //圆的直径必然要小于矩形的宽高

103 if (2 * radius > width || 2 * radius >height) {104 return false;105 }106

107 cxt.save();108 cxt.translate(x, y);109 //绘制圆角矩形的各个边

110 this.drawRoundRectPath(cxt, width, height, radius);111 cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2

112 cxt.strokeStyle = strokeColor || "#000";113 cxt.stroke();114 cxt.restore();115 },116 drawRoundRectPath(cxt, width, height, radius) {117 var canvas = document.getElementById("tutorial");118 var ctx = canvas.getContext("2d"); //获得画笔

119 cxt.beginPath(0);120 //从右下角顺时针绘制，弧度从0到1/2PI

121 cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);122

123 //矩形下边线

124 cxt.lineTo(radius, height);125

126 //左下角圆弧，弧度从1/2PI到PI

127 cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);128

129 //矩形左边线

130 cxt.lineTo(0, radius);131

132 //左上角圆弧，弧度从PI到3/2PI

133 cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);134

135 //上边线

136 cxt.lineTo(width - radius, 0);137

138 //右上角圆弧

139 cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);140

141 //右边线

142 cxt.lineTo(width, height -radius);143 cxt.closePath();144 },