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

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

目录

canvas arc() 方法

绘制圆形

填充圆形

canvas rect() 绘制矩形

注意：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 = 逆时针。

绘制圆形

20181116134158689.gif

实现代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>绘制圆形</title>
  7.     <style type="text/css">
  8.         .divContent {
  9.             display: inline-block;
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: #333333;
  13.             margin-left: 200px;
  14.         }
  15.     </style>
  16.     <!-- JQuery CDN-->
  17.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  18.     <script type="module">
  19.         /**画第一个圆形----非动画版
  20.          * */
  21.         let drawArc1 = function () {
  22.             /**获取画布*/
  23.             let canvas = document.getElementById("myCanvas");
  24.             /**
  25.              * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
  26.              * 如下所示，让画布填充父元素
  27.              * @type {void|string|XML|*|jQuery}
  28.              */
  29.             canvas.width = $(".divContent").css("width").replace("px", "");
  30.             canvas.height = $(".divContent").css("height").replace("px", "");
  31.             /**获取画布上下文*/
  32.             let ctx = canvas.getContext("2d");
  33.             /**1)设置画笔颜色，不设置时默认为黑色
  34.              * strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
  35.             ctx.strokeStyle = "#fff";
  36.             /**2）开始一条新路径
  37.              * beginPath() 方法开始一条路径，或重置当前的路径*/
  38.             ctx.beginPath();
  39.             /**3）创建弧线/曲线
  40.              * 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
  41.              * 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
  42.             ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
  43.             /**4）绘制定义好的路径
  44.              * stroke() 方法实际地绘制路径*/
  45.             ctx.stroke();
  46.         };
  47.         /**画第二个圆—————动画版
  48.          * eAngle：圆形结束的角度，会动态变化达到动画的效果
  49.          * canvas：画布，作为参数传入，避免每次重复获取
  50.          * ctx：画布上下文，作为参数传入，避免每次重复获取
  51.          */
  52.         let eAngle = 0;
  53.         let drawArc2 = function (canvas, ctx) {
  54.             /**
  55.              * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
  56.              * 如下所示，让画布填充父元素
  57.              * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
  58.              * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
  59.              * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
  60.              * */
  61.             canvas.width = $(".divContent").css("width").replace("px", "");
  62.             canvas.height = $(".divContent").css("height").replace("px", "");
  63.             /**1)设置画笔颜色，不设置时默认为黑色
  64.              * strokeStyle 属性设置或返回画笔的颜色、渐变或模式*/
  65.             ctx.strokeStyle = "#fff";
  66.             /**2）开始一条新路径
  67.              * beginPath() 方法开始一条路径，或重置当前的路径*/
  68.             ctx.beginPath();
  69.             /**3）创建弧线/曲线
  70.              * true 表示逆时针绘制，false 或者不写为顺时针*/
  71.             ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
  72.             /**4）绘制定义好的路径
  73.              * stroke() 方法实际地绘制路径*/
  74.             ctx.stroke();
  75.             /**
  76.              * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
  77.              * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
  78.              * @type {number}
  79.              */
  80.             eAngle = eAngle + 0.1;
  81.             if (eAngle >= 2 * Math.PI) {
  82.                 eAngle = 0;
  83.             }
  84.             /**帧动画回调*/
  85.             requestAnimationFrame(function () {
  86.                 drawArc2(canvas, ctx);
  87.             });
  88.         };
  89.         $(function () {
  90.             drawArc1();
  91.             /**获取画布*/
  92.             const canvas = document.getElementById("myCanvas2");
  93.             /**获取画布上下文*/
  94.             const ctx = canvas.getContext("2d");
  95.             drawArc2(canvas, ctx);
  96.         });
  97.     </script>
  98. </head>
  99. <body>
  100. <div class="divContent">
  101.     <canvas id="myCanvas">
  102.         浏览器不支持 Canvas
  103.     </canvas>
  104. </div>
  105. <div class="divContent">
  106.     <canvas id="myCanvas2">
  107.         浏览器不支持 Canvas
  108.     </canvas>
  109. </div>
  110. </body>
  111. </html>

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

填充圆形

20181116140100440.gif

区别在于：

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

stroke() 绘制已定义的路径

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>填充圆形</title>
  7.     <style type="text/css">
  8.         .divContent {
  9.             display: inline-block;
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: #333333;
  13.             margin-left: 200px;
  14.         }
  15.     </style>
  16.     <!-- JQuery CDN-->
  17.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  18.     <script type="module">
  19.         /**画第一个圆形----非动画版
  20.          */
  21.         let drawArc1 = function () {
  22.             /**获取画布*/
  23.             let canvas = document.getElementById("myCanvas");
  24.             /**
  25.              * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
  26.              * 如下所示，让画布填充父元素
  27.              * @type {void|string|XML|*|jQuery}
  28.              */
  29.             canvas.width = $(".divContent").css("width").replace("px", "");
  30.             canvas.height = $(".divContent").css("height").replace("px", "");
  31.             /**获取画布上下文*/
  32.             let ctx = canvas.getContext("2d");
  33.             /**1)设置路径将要填充的颜色
  34.              * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
  35.             ctx.fillStyle = "#f00";
  36.             /**2）开始一条新路径
  37.              * beginPath() 方法开始一条路径，或重置当前的路径*/
  38.             ctx.beginPath();
  39.             /**3）创建弧线/曲线
  40.              * 圆心的位置为画布的中心，圆形半径为 50 像素(不能带单位)
  41.              * 起始角度为 0，即 x 轴的正方向，结束角度为 360度*/
  42.             ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
  43.             /**4）绘制定义好的路径
  44.              * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
  45.             ctx.fill();
  46.         };
  47.         /**画第二个圆—————动画版
  48.          * eAngle：圆形结束的角度，会动态变化达到动画的效果
  49.          * canvas：画布，作为参数传入，避免每次重复获取
  50.          * ctx：画布上下文，作为参数传入，避免每次重复获取
  51.          */
  52.         let eAngle = 0;
  53.         let drawArc2 = function (canvas, ctx) {
  54.             /**
  55.              * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
  56.              * 如下所示，让画布填充父元素
  57.              * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
  58.              * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
  59.              * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
  60.              * */
  61.             canvas.width = $(".divContent").css("width").replace("px", "");
  62.             canvas.height = $(".divContent").css("height").replace("px", "");
  63.             /**1)设置路径将要填充的颜色
  64.              * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
  65.             ctx.fillStyle = "#f00";
  66.             /**2）开始一条新路径
  67.              * beginPath() 方法开始一条路径，或重置当前的路径*/
  68.             ctx.beginPath();
  69.             /**3）创建弧线/曲线
  70.              * true 表示逆时针绘制，false 或者不写为顺时针*/
  71.             ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, eAngle, true);
  72.             /**4）绘制定义好的路径
  73.              * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
  74.             ctx.fill();
  75.             /**
  76.              * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
  77.              * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
  78.              * @type {number}
  79.              */
  80.             eAngle = eAngle + 0.1;
  81.             if (eAngle >= 2 * Math.PI) {
  82.                 eAngle = 0;
  83.             }
  84.             requestAnimationFrame(function () {
  85.                 drawArc2(canvas, ctx);
  86.             });
  87.         };
  88.         $(function () {
  89.             drawArc1();
  90.             /**获取画布*/
  91.             const canvas = document.getElementById("myCanvas2");
  92.             /**获取画布上下文*/
  93.             const ctx = canvas.getContext("2d");
  94.             drawArc2(canvas, ctx);
  95.         });
  96.     </script>
  97. </head>
  98. <body>
  99. <div class="divContent">
  100.     <canvas id="myCanvas">
  101.         浏览器不支持 Canvas
  102.     </canvas>
  103. </div>
  104. <div class="divContent">
  105.     <canvas id="myCanvas2">
  106.         浏览器不支持 Canvas
  107.     </canvas>
  108. </div>
  109. </body>
  110. </html>

canvas rect() 绘制矩形

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

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

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
























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

20181116163918183.gif

实现代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <title>绘制矩形</title>
  7.     <style type="text/css">
  8.         .divContent {
  9.             display: inline-block;
  10.             width: 300px;
  11.             height: 300px;
  12.             background-color: #333333;
  13.             margin-left: 100px;
  14.         }
  15.     </style>
  16.     <!-- JQuery CDN-->
  17.     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  18.     <script type="module">
  19.         /**画第一个九宫格矩形
  20.          * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
  21.          * ctx：画布上下文
  22.          */
  23.         let drawRect1 = function (canvas, ctx) {
  24.             /**矩形绘制的颜色*/
  25.             let colorArrays = [
  26.                 "#FFCC66", "#CC00FF", "#996633",
  27.                 "#3366CC", "#330000", "#FFFF66",
  28.                 "#000099", "#FF3300", "#007700"
  29.             ];
  30.             /**每个单元格矩形的颜色索引*/
  31.             let index = 0;
  32.             for (let i = 0; i < 3; i++) {
  33.                 for (let j = 0; j < 3; j++) {
  34.                     /**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
  35.                     /**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
  36.                     ctx.beginPath();
  38.                     /**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
  39.                      * strokeStyle：设置画笔当前的颜色
  40.                      * */
  41.                     ctx.lineWidth = "2";
  42.                     ctx.strokeStyle = colorArrays[index++];
  43.                     /**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
  44.                      *      这样的就是一个九宫格，而且随着画布尺寸的变化而变化
  45.                      * stroke() 实际绘制已定义的路径*/
  46.                     ctx.rect(j * canvas.width / 3,
  47.                         i * canvas.height / 3,
  48.                         canvas.width / 3,
  49.                         canvas.height);
  50.                     ctx.stroke();
  52.                 }
  53.             }
  54.         };
  56.         /**画第一个九宫格矩形
  57.          * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
  58.          * ctx：画布上下文
  59.          */
  60.         let drawRect2 = function (canvas, ctx) {
  61.             /**矩形绘制的颜色*/
  62.             let colorArrays = [
  63.                 "#FFCC66", "#CC00FF", "#996633",
  64.                 "#3366CC", "#330000", "#FFFF66",
  65.                 "#000099", "#FF3300", "#007700"
  66.             ];
  67.             /**这里用于随机切换一下两个单元格的颜色*/
  68.             let x = 0, y = 0;
  69.             while (x == y) {
  70.                 x = Math.round(Math.random() * 8);
  71.                 y = Math.round(Math.random() * 8);
  72.             }
  73.             let temp = colorArrays[x];
  74.             colorArrays[x] = colorArrays[y];
  75.             colorArrays[y] = temp;
  77.             let index = 0;
  78.             for (let i = 0; i < 3; i++) {
  79.                 for (let j = 0; j < 3; j++) {
  80.                     /**其它的内容都是辅助，真正绘制矩形的核心代码就是下面 3 步*/
  81.                     /**1）beginPath() 方法开始一条路径，或重置当前的路径。比如 矩形、圆形等*/
  82.                     ctx.beginPath();
  83.                     /**2）lineWidth 属性设置或返回当前线条的宽度，以像素计，不能再带单位。
  84.                      * strokeStyle：设置画笔当前的颜色
  85.                      * */
  86.                     ctx.lineWidth = "2";
  87.                     ctx.fillStyle = colorArrays[index++];
  88.                     /**3）rect() 方法创建矩形,起点坐标动态改变，长宽为画布的三分之一
  89.                      *      这样的就是一个九宫格，而且随着画布尺寸的变化而变化
  90.                      * stroke() 实际绘制已定义的路径*/
  91.                     ctx.rect(j * canvas.width / 3,
  92.                         i * canvas.height / 3,
  93.                         canvas.width / 3,
  94.                         canvas.height);
  95.                     ctx.fill();
  96.                 }
  97.             }
  98.             setTimeout(function () {
  99.                 drawRect2(canvas, ctx);
  100.             }, 1000);
  101.         };
  103.         $(function () {
  104.             /**获取第一张画布*/
  105.             let canvas1 = document.getElementById("myCanvas1");
  106.             /**为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
  107.              * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
  108.              * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
  109.              * */
  110.             canvas1.width = $(".divContent").css("width").replace("px", "");
  111.             canvas1.height = $(".divContent").css("height").replace("px", "");
  112.             /**获取画布上下文*/
  113.             let ctx1 = canvas1.getContext("2d");
  114.             drawRect1(canvas1, ctx1);
  115.             /**获取第二张画布*/
  116.             let canvas2 = document.getElementById("myCanvas2");
  117.             canvas2.width = $(".divContent").css("width").replace("px", "");
  118.             canvas2.height = $(".divContent").css("height").replace("px", "");
  119.             /**获取画布上下文*/
  120.             let ctx2 = canvas2.getContext("2d");
  121.             drawRect2(canvas2, ctx2);
  122.         });
  123.     </script>
  124. </head>
  125. <body>
  126. <div class="divContent">
  127.     <canvas id="myCanvas1">
  128.         浏览器不支持 Canvas
  129.     </canvas>
  130. </div>
  131. <div class="divContent">
  132.     <canvas id="myCanvas2">
  133.         浏览器不支持 Canvas
  134.     </canvas>
  135. </div>
  136. </body>
  137. </html>

发表评论

表情：
评论列表 （有 0 条评论，1675人围观）

还没有评论，来说两句吧...

相关阅读