Canvas 学习2 (矩形,虚线矩形,圆角矩形)

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跳过

代码，画线：

 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     },

效果图：

难搞哦