canvas arc() 方法绘制弧线、曲线、圆形，rect() 绘制矩形

男娘i 2022-04-16 03:36 1552阅读 0赞

**目录**

canvas arc() 方法

绘制圆形

填充圆形

canvas rect() 绘制矩形

--------------------

注意：canvas 的 width 与 height 属性的值不能带单位，如 100px、100% 都是错误的，只能是纯数字，单位默认为 px。

# canvas arc() 方法 #

1、arc() 方法创建弧/曲线（用于创建圆或部分圆），更多可参考《[HTML 5 Canvas 绘制图形图像][HTML 5 Canvas]》

2、提示1：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2\*Math.PI。

3、提示2：请使用 [stroke()][stroke] 或 [fill()][fill] 方法在画布上绘制实际的弧。stroke 方法用于绘制路径，fill 方法用于填充路径。

![弧/曲线][aHR0cDovL3d3dy53M3NjaG9vbC5jb20uY24vaS9hcmMuZ2lm]

**4、JavaScript 语法：**context.arc(*x*,*y*,*r*,*sAngle*,*eAngle*,*counterclockwise*);

<table> 
 <tbody> 
  <tr> 
   <th style="width:146px;">参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td style="width:146px;"><em>x</em></td> 
   <td>圆的中心的 x 坐标。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;"><em>y</em></td> 
   <td>圆的中心的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;"><em>r</em></td> 
   <td>圆的半径。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;"><em>sAngle</em></td> 
   <td>起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;"><em>eAngle</em></td> 
   <td>结束角，以弧度计。</td> 
  </tr> 
  <tr> 
   <td style="width:146px;"><em>counterclockwise</em></td> 
   <td>可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。</td> 
  </tr> 
 </tbody> 
</table>

## 绘制圆形 ##

![20181116134158689.gif][]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>绘制圆形</title>
        <style type="text/css">
            .divContent {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: #333333;
                margin-left: 200px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="module">
            /**画第一个圆形----非动画版
             * */
            let drawArc1 = function () {
                /**获取画布*/
                let canvas = document.getElementById("myCanvas");
                /**
                 * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
                 * 如下所示，让画布填充父元素
                 * @type {void|string|XML|*|jQuery}
                 */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
                /**获取画布上下文*/
                let ctx = canvas.getContext("2d");
                /**1)设置画笔颜色，不设置时默认为黑色
                 * strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
                ctx.strokeStyle = "#fff";
                /**2）开始一条新路径
                 * beginPath() 方法开始一条路径，或重置当前的路径*/
                ctx.beginPath();
                /**3）创建弧线/曲线
                 * 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
                 * 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
                ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
                /**4）绘制定义好的路径
                 * stroke() 方法实际地绘制路径*/
                ctx.stroke();
            };
            /**画第二个圆—————动画版
             * eAngle：圆形结束的角度，会动态变化达到动画的效果
             * canvas：画布，作为参数传入，避免每次重复获取
             * ctx：画布上下文，作为参数传入，避免每次重复获取
             */
            let eAngle = 0;
            let drawArc2 = function (canvas, ctx) {
                /**
                 * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
                 * 如下所示，让画布填充父元素
                 * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
                /**1)设置画笔颜色，不设置时默认为黑色
                 * strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
                ctx.strokeStyle = "#fff";
                /**2）开始一条新路径
                 * beginPath() 方法开始一条路径，或重置当前的路径*/
                ctx.beginPath();
                /**3）创建弧线/曲线
                 * true 表示逆时针绘制，false 或者不写为顺时针*/
                ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
                /**4）绘制定义好的路径
                 * stroke() 方法实际地绘制路径*/
                ctx.stroke();
                /**
                 * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
                 * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
                 * @type {number}
                 */
                eAngle = eAngle + 0.1;
                if (eAngle >= 2 * Math.PI) {
                    eAngle = 0;
                }
                /**帧动画回调*/
                requestAnimationFrame(function () {
                    drawArc2(canvas, ctx);
                });
            };
            $(function () {
                drawArc1();
                /**获取画布*/
                const canvas = document.getElementById("myCanvas2");
                /**获取画布上下文*/
                const ctx = canvas.getContext("2d");
                drawArc2(canvas, ctx);
            });
        </script>
    </head>
    <body>
    <div class="divContent">
        <canvas id="myCanvas">
            浏览器不支持 Canvas
        </canvas>
    </div>
    <div class="divContent">
        <canvas id="myCanvas2">
            浏览器不支持 Canvas
        </canvas>
    </div>
    </body>
    </html>

对 requestAnimationFrame 不熟悉的，可以查看《[ requestAnimationFrame()方法实现帧动画][requestAnimationFrame]》

## 填充圆形 ##

![20181116140100440.gif][]

区别在于：

strokeStyle 属性用于设置或返回画笔的颜色、渐变或模式

stroke()    绘制已定义的路径

fillStyle 属性用于设置或返回用于填充绘画的颜色、渐变或模式

fill()  属性用于填充当前绘图（路径）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>填充圆形</title>
        <style type="text/css">
            .divContent {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: #333333;
                margin-left: 200px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="module">
            /**画第一个圆形----非动画版
             */
            let drawArc1 = function () {
                /**获取画布*/
                let canvas = document.getElementById("myCanvas");
                /**
                 * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
                 * 如下所示，让画布填充父元素
                 * @type {void|string|XML|*|jQuery}
                 */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
                /**获取画布上下文*/
                let ctx = canvas.getContext("2d");
                /**1)设置路径将要填充的颜色
                 * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
                ctx.fillStyle = "#f00";
                /**2）开始一条新路径
                 * beginPath() 方法开始一条路径，或重置当前的路径*/
                ctx.beginPath();
                /**3）创建弧线/曲线
                 * 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
                 * 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
                ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
                /**4）绘制定义好的路径
                 * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
                ctx.fill();
            };
            /**画第二个圆—————动画版
             * eAngle：圆形结束的角度，会动态变化达到动画的效果
             * canvas：画布，作为参数传入，避免每次重复获取
             * ctx：画布上下文，作为参数传入，避免每次重复获取
             */
            let eAngle = 0;
            let drawArc2 = function (canvas, ctx) {
                /**
                 * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
                 * 如下所示，让画布填充父元素
                 * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
                /**1)设置路径将要填充的颜色
                 * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
                ctx.fillStyle = "#f00";
                /**2）开始一条新路径
                 * beginPath() 方法开始一条路径，或重置当前的路径*/
                ctx.beginPath();
                /**3）创建弧线/曲线
                 * true 表示逆时针绘制，false 或者不写为顺时针*/
                ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
                /**4）绘制定义好的路径
                 * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
                ctx.fill();
                /**
                 * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
                 * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
                 * @type {number}
                 */
                eAngle = eAngle + 0.1;
                if (eAngle >= 2 * Math.PI) {
                    eAngle = 0;
                }
                requestAnimationFrame(function () {
                    drawArc2(canvas, ctx);
                });
            };
            $(function () {
                drawArc1();
                /**获取画布*/
                const canvas = document.getElementById("myCanvas2");
                /**获取画布上下文*/
                const ctx = canvas.getContext("2d");
                drawArc2(canvas, ctx);
            });
        </script>
    </head>
    <body>
    <div class="divContent">
        <canvas id="myCanvas">
            浏览器不支持 Canvas
        </canvas>
    </div>
    <div class="divContent">
        <canvas id="myCanvas2">
            浏览器不支持 Canvas
        </canvas>
    </div>
    </body>
    </html>

# canvas rect() 绘制矩形 #

rect() 方法用于创建矩形。

提示：请使用 [stroke()][stroke] 在画布上实际绘制矩形，或使用 [fill()][fill] 方法在画布上实际地填充矩形。

**JavaScript 语法：**context.rect(*x*,*y*,*width*,*height*);

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>x</em></td> 
   <td>矩形左上角的 x 坐标</td> 
  </tr> 
  <tr> 
   <td><em>y</em></td> 
   <td>矩形左上角的 y 坐标</td> 
  </tr> 
  <tr> 
   <td><em>width</em></td> 
   <td>矩形的宽度，以像素计，所以不需要，也不能再带单位</td> 
  </tr> 
  <tr> 
   <td><em>height</em></td> 
   <td>矩形的高度，以像素计，所以不需要，也不能再带单位</td> 
  </tr> 
 </tbody> 
</table>

![20181116163918183.gif][]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>绘制矩形</title>
        <style type="text/css">
            .divContent {
                display: inline-block;
                width: 300px;
                height: 300px;
                background-color: #333333;
                margin-left: 100px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="module">
            /**画第一个九宫格矩形
             * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
             * ctx：画布上下文
             */
            let drawRect1 = function (canvas, ctx) {
                /**矩形绘制的颜色*/
                let colorArrays = [
                    "#FFCC66", "#CC00FF", "#996633",
                    "#3366CC", "#330000", "#FFFF66",
                    "#000099", "#FF3300", "#007700"
                ];
                /**每个单元格矩形的颜色索引*/
                let index = 0;
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        /**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
                        /**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
                        ctx.beginPath();
    
                        /**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
                         * strokeStyle：设置画笔当前的颜色
                         * */
                        ctx.lineWidth = "2";
                        ctx.strokeStyle = colorArrays[index++];
                        /**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
                         *      这样的就是一个九宫格，而且随着画布尺寸的变化而变化
                         * stroke() 实际绘制已定义的路径*/
                        ctx.rect(j * canvas.width / 3,
                            i * canvas.height / 3,
                            canvas.width / 3,
                            canvas.height);
                        ctx.stroke();
    
                    }
                }
            };
    
            /**画第一个九宫格矩形
             * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
             * ctx：画布上下文
             */
            let drawRect2 = function (canvas, ctx) {
                /**矩形绘制的颜色*/
                let colorArrays = [
                    "#FFCC66", "#CC00FF", "#996633",
                    "#3366CC", "#330000", "#FFFF66",
                    "#000099", "#FF3300", "#007700"
                ];
                /**这里用于随机切换一下两个单元格的颜色*/
                let x = 0, y = 0;
                while (x == y) {
                    x = Math.round(Math.random() * 8);
                    y = Math.round(Math.random() * 8);
                }
                let temp = colorArrays[x];
                colorArrays[x] = colorArrays[y];
                colorArrays[y] = temp;
    
                let index = 0;
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 3; j++) {
                        /**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
                        /**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
                        ctx.beginPath();
                        /**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
                         * strokeStyle：设置画笔当前的颜色
                         * */
                        ctx.lineWidth = "2";
                        ctx.fillStyle = colorArrays[index++];
                        /**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
                         *      这样的就是一个九宫格，而且随着画布尺寸的变化而变化
                         * stroke() 实际绘制已定义的路径*/
                        ctx.rect(j * canvas.width / 3,
                            i * canvas.height / 3,
                            canvas.width / 3,
                            canvas.height);
                        ctx.fill();
                    }
                }
                setTimeout(function () {
                    drawRect2(canvas, ctx);
                }, 1000);
            };
    
            $(function () {
                /**获取第一张画布*/
                let canvas1 = document.getElementById("myCanvas1");
                /**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas1.width = $(".divContent").css("width").replace("px", "");
                canvas1.height = $(".divContent").css("height").replace("px", "");
                /**获取画布上下文*/
                let ctx1 = canvas1.getContext("2d");
                drawRect1(canvas1, ctx1);
                /**获取第二张画布*/
                let canvas2 = document.getElementById("myCanvas2");
                canvas2.width = $(".divContent").css("width").replace("px", "");
                canvas2.height = $(".divContent").css("height").replace("px", "");
                /**获取画布上下文*/
                let ctx2 = canvas2.getContext("2d");
                drawRect2(canvas2, ctx2);
            });
        </script>
    </head>
    <body>
    <div class="divContent">
        <canvas id="myCanvas1">
            浏览器不支持 Canvas
        </canvas>
    </div>
    <div class="divContent">
        <canvas id="myCanvas2">
            浏览器不支持 Canvas
        </canvas>
    </div>
    </body>
    </html>

[HTML 5 Canvas]: https://blog.csdn.net/wangmx1993328/article/details/84027238
[stroke]: http://www.w3school.com.cn/tags/canvas_stroke.asp
[fill]: http://www.w3school.com.cn/tags/canvas_fill.asp
[aHR0cDovL3d3dy53M3NjaG9vbC5jb20uY24vaS9hcmMuZ2lm]: /images/20220416/747e076ce5f14756aba16b46157d5d7e.png
[20181116134158689.gif]: /images/20220416/8b08f4c3783c419a8364c34330a5f042.png
[requestAnimationFrame]: https://blog.csdn.net/wangmx1993328/article/details/84106703
[20181116140100440.gif]: /images/20220416/5be294f46724478a920e1218b818ef63.png
[20181116163918183.gif]: /images/20220416/79546dac6c5747d3ba5598bddc818217.png