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

最新推荐文章于 2024-08-16 18:48:55 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量1.7w

点赞数 9

分类专栏： Canvas

本文链接：https://blog.csdn.net/wangmx1993328/article/details/84137655

版权

Canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

canvas arc() 方法

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

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

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

弧/曲线

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

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。

绘制圆形

实现代码如下：

<!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>
    <!-- JQuery CDN-->
    <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()方法实现帧动画》

填充圆形

区别在于：

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>
    <!-- JQuery CDN-->
    <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() 在画布上实际绘制矩形，或使用 fill() 方法在画布上实际地填充矩形。

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

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计，所以不需要，也不能再带单位
height	矩形的高度，以像素计，所以不需要，也不能再带单位

实现代码如下：

<!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>
    <!-- JQuery CDN-->
    <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>