Canvas 學習2 (矩形,虛線矩形,圓角矩形)

本文轉載自查看原文 2020-10-14 11:25 587 Canvas學習之路

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         width:寬度
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 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*/ 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     },

效果圖：

難搞哦

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 canvas 繪制圓角矩形 html canvas 繪制圓角矩形 canvas制作圓角矩形（包括填充矩形的功能） canvas畫圓角矩形的方法 canvas.drawRoundRect方法，繪制圓角矩形 css 圓角矩形用法 SVG.圓角矩形 html實現圓角矩形 canva繪制圓角矩形用CSS做圓角矩形