1.Canvas画矩形
1 /** @type {HTMLCanvasElement} */ 2 var canvas = document.getElementById("tutorial"); 3 var ctx = canvas.getContext("2d"); //获得画笔 4 /* 5 1.描边矩形：strokeRect 6 2.填充矩形：fillRect 7 绘制矩形需要一个起始点 8 四个参数：sx,sy,width,height 9 sx:开始点的X坐标 10 sy:开始点的Y坐标 11 宽度 12 height:高度 13 */ 14 //第一个描边矩形： 15 ctx.strokeRect(0, 0, 100, 100); 16 //第一个填充矩形 17 ctx.fillRect(100, 100, 100, 100); 18 ctx.strokeRect(200, 200, 100, 100); 19 ctx.fillRect(300, 300, 100, 100); 20 ctx.strokeRect(400, 400, 100, 100); 21 ctx.strokeRect(400, 200, 100, 100); 22 ctx.fillRect(500, 100, 100, 100);
效果图：
2.虚线矩形
canvas没有提供绘制虚线的api，我们可以通过moveTo，和lineTo来实现绘制虚线的需求。
思路是将一整条虚线分成若干个小线段，遍历这些小线段，单数线段通过lineTo绘制，双数线段使用moveTo跳过
思路是将一整条虚线分成若干个小线段，遍历这些小线段，单数线段通过lineTo绘制，双数线段使用moveTo跳过
代码，画线：
1 drawDashLine([x1, y1], [x2, y2], step = 5) { 2 var canvas = document.getElementById("tutorial"); 3 var ctx = canvas.getContext("2d"); //获得画笔 4 const x = x2 - x1, 5 y = y2 - y1, 6 count = Math.floor(Math.sqrt(x * x + y * y) / step), 7 xv = x / count, 8 yv = y / count; 9 ctx.beginPath(); 10 for (let i = 0; i < count; i++) { 11 if (i % 2 === 0) { 12 ctx.moveTo(x1, y1); 13 } else { 14 ctx.lineTo(x1, y1); 15 } 16 x1 += xv; 17 y1 += yv; 18 } 19 ctx.lineTo(x2, y2); 20 },
实现矩形：
1 drawDashRect(left, top, width, height, step = 5) { 2 var canvas = document.getElementById("tutorial"); 3 var ctx = canvas.getContext("2d"); //获得画笔 4 this.drawDashLine([left, top], [left + width, top], step); 5 ctx.stroke(); 6 this.drawDashLine( 7 [left + width, top], 8 [left + width, top + height], 9 step 10 ); 11 ctx.stroke(); 12 this.drawDashLine( 13 [left + width, top + height], 14 [left, top + height], 15 step 16 ); 17 ctx.stroke(); 18 this.drawDashLine([left, top + height], [left, top], step); 19 ctx.stroke(); 20 },
调用：
this.drawDashRect(100, 100, 220, 220);
设置描边色：
ctx.strokeStyle = 'blue'; //设置描边色 ctx.lineWidth = 6;//描边线宽度设置
效果如图：
3.圆角矩形
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 step 42 ); 43 ctx.stroke(); 44 this.drawDashLine( 45 [left + width, top + height], 46 [left, top + height], 47 step 48 ); 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 矩形的宽度 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 矩形的宽度 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*/ strokeColor 99 ) { 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 },
效果图：
难搞哦