canvas arc() 方法绘制弧线、曲线、圆形，rect() 绘制矩形
2024-06-02 10:14:49
目录
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 = 逆时针。 |
绘制圆形
实现代码如下：
<!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>canvas arc() 方法绘制弧线、曲线、圆形，rect() 绘制矩形相关推荐
- html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
- canvs中的arc方法详解
arc的定义 在使用arc这个方法之前,你一定要知道arc方法中参数是代表什么意思 arc() 方法创建弧/曲线(用于创建圆或部分圆). 提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结 ...
- 八卦图代码matlab,HTML5 Canvas arc()函数 八卦图示例
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- 绘制clothoid曲线
绘制clothoid曲线 clothoid介绍 绘制clothoid曲线 积分近似 以直代曲 注意事项 clothoid介绍 clothoid曲线是一种曲率半径与长度成线性关系的曲线,由于其曲率平 ...
- 【OpenGL】使用OpenGL的GLU库绘制BSpline曲线
[OpenGL]使用OpenGL的GLU库绘制BSpline曲线. 1.绘制目标 2.核心代码 3.运行结果 1.绘制目标 使用OpenGL的GLU库绘制BSpline曲线. 2.核心代码 /// T ...
- Matplotlib复习（1）——绘制三角函数曲线、正态分布曲线、圆锥曲线、极坐标方程（心形线、玫瑰线、阿基米德螺线）、3D图（球、马鞍面）
文章目录 0 前置 1 基础API--绘制三角函数曲线 2 图例.注释.文本--绘制正态分布曲线 3 轮廓--绘制圆锥曲线 4 绘制极坐标方程(心形线.玫瑰线.阿基米德螺线) 5 3D图(球.马鞍面) ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊, ...
- 学习Canvas基础-绘制弧线和曲线
绘制曲线和弧线的方法 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 用于绘制圆或部分圆. 参数: x-圆弧中心(圆心)的 x 轴 ...
- html五绘制弧线的方法是,使用HTML5 Canvas API绘制弧线的教程
绘制标准圆弧 在开始之前,我们优化一下我们的作图环境.灵感来自于上节课的纹理,如果不喜欢这个背景,我在images目录下还提供了其他的背景图,供大家选择.另外把所有的样式表都写在了 下.JavaScr ...
最新文章
- ROS nodelet的使用
- 11g中AWR新快照视图
- 求职必备：如何用产品思维写简历
- 为什么公司的HR这么牛掰
- 自己搭建一个k8s环境
- 支付宝「集五福」的阳谋
- C#缓存absoluteExpiration、slidingExpiration两个参数的疑惑
- python字符串转换为json_在python2.7中将原始字符串转换为JSON对象
- Mac电脑修复多个文件的错误权限的方法
- C#LINQ方法操作-Max求数组集合中最大值
- mnist数据集下载及使用
- 【吴恩达深度学习】Residual Networks（PyTorch）
- 2021全国大学生电子设计竞赛F题参赛简记
- 微管理：给你一个技术团队，你该怎么管札记-化繁为简
- 【做小游戏在Godot中遇到的问题第一篇】
- plc云网关与串口服务器区别,plc智能网关和传统工业路由器有什么区别
- win10添加网络打印机_win10系统连接网络打印机
- Python 【爬虫3】_微信小程序_小游戏数据助手数据爬取
- mongoDB图形可视化界面及操作
- 论文笔记-基于呼吸信号的人类应激状态实时遥测