Canvas学习笔记(四)--绘图（路径【弧线】）

最新推荐文章于 2022-07-15 17:17:09 发布
最新推荐文章于 2022-07-15 17:17:09 发布
阅读量162 收藏
点赞数
分类专栏： html5 canvas web前端 文章标签： web前端 html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_i_snow/article/details/84165666
版权
web前端 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
html5
8 篇文章 0 订阅
订阅专栏
canvas
8 篇文章 0 订阅
订阅专栏

1、绘制弧线的方法

 

arc(x, y, radius, startAngle, endAngle, anticlockwise)

 

x，y：圆心的坐标；

radius：圆心的半径；

startAngle：起始弧度（以横轴X为标准）；

endAngle：终止弧度（以横轴X为标准）；

anticlockwise： true表示逆时针，false表示顺时针；

 

注：arc方法中用到的角度是以弧度为单位，而不是度。

转换公式：var radians = (Math.PI/180)*degrees;

 

2、关于弧度的说明

 



 相信看过图后，就很好理解了。

 

3、绘图实例--笑脸

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var can = document.getElementById('test');
			if(can.getContext){
				var cxt = can.getContext('2d');

				cxt.beginPath();
				cxt.arc(100,100,80,0,Math.PI*2,true);
				cxt.moveTo(160,100);
				cxt.arc(100,100,60,0,Math.PI,false);
				cxt.moveTo(85,75);
				cxt.arc(75,75,10,0,Math.PI*2,false);
				cxt.moveTo(115,75);
				cxt.lineTo(135,75);
				cxt.stroke();
			}
		}
	</script>
  </head>	
  
  <body οnlοad="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

代码显示的结果：

 

4、绘图实例--衣架

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			
			var can = document.getElementById('test');
			if(can.getContext){
				var cxt = can.getContext('2d');

				cxt.beginPath();
				cxt.arc(100,30,15,Math.PI,Math.PI*0.5,false);
				cxt.lineTo(100,65);
				cxt.lineTo(30,100);
				cxt.arc(30,115,15,Math.PI*1.5,Math.PI*0.5,true);
				cxt.lineTo(170,130);
				cxt.arc(170,115,15,Math.PI*0.5,Math.PI*1.5,true);
				cxt.lineTo(100,65);
				cxt.stroke();
				cxt.closePath();
			}
		}
	</script>
  </head>	
  
  <body οnlοad="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

 

代码显示的结果：

 


 

ice_i_snow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas学习 Arc
weixin_30333885的博客
06-14 80
Canvas学习 Arc 1.Canvas画圆 context.arc(x, y, radius, startAngle, endAngle, anticlockwise) 参数 x,y表示圆心 radius半径 startAngle起始弧度 endAngle终止弧度 anticlockwise是否为逆时针方向 <scr...
html5绘制弧形的startAngle和endAngle解释
10-11
html5绘制弧形的startAngle和endAngle解释，图片中是按照顺时针描述的，逆时针一样，根据需要来设置startAngle和endAngle，实际上按照顺时针完全可以实现任何的弧形
QML画图-Canvas画基本图形
落尘飞
07-06 1万+
1.canvas画矩形   a.无路径画法     ctx.fillRect(200,100,50,40);    //填充     ctx.strokeRect(200,100,50,40);  //描边     注：先用fillRect填充了矩形，用stroke()，不能描边，因为虽然有个矩形，但不存在路径。   b.rect     ctx.rect(300,100,50,40)
HTML5绘图基础_09_绘制弧线详解
来老师的专栏
01-18 2488
CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。 参数的定义具体如下：
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
sinolzeng的专栏
10-14 1761
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。 arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以
html5中canvas学习笔记2-判断浏览器是否支持canvas
11-21
判断浏览器是否支持canvas，具体代码如下： 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
12-14
在canvas中当在canvas上写width和height时为canvas的实际画板大小，默认情况下width为300px，height为150px。 在style里面写css样式的时候widht和height为实际显示尺寸大小。 现在以用canvas画一个对角线为例： ...
canvas学习笔记之绘制简单路径
01-21
1 线段（直线路径） 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 2 矩形路径 绘制...
Qt之图形（绘制漂亮的圆弧）
weixin_33875564的博客
05-13 2529
简述 综合前面对二维绘图的介绍，想必我们对一些基本绘图有了深入的了解，下面我们来实现一些漂亮的图形绘制。 简述 圆形 效果 源码 弧形 效果 源码 文本 效果 源码 旋转 效果 源码 圆形 经常地，我们会在网上看到一些列的抽奖活动，里面就有圆盘抽奖，是不是有点手痒了O(∩_∩)O~ ...
Canvas学习：绘制圆和圆弧
wulixiaoxiao1的博客
03-18 7781
圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。 与圆和圆弧相关的基础知识 在学习如何绘制圆和圆弧之前，有一些相关的基础知识有必要先进行了解。 角度旋转角度和弧度
HTML5 Canvas中绘制椭圆的5种方法
热门推荐
汉堡请不要欺负面条
02-28 2万+
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是现在更新的， 参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针) 请参考html5维护及更新 目前只有谷歌可以支持，其他还浏览器还未存在ellip
canvas——绘制弧、圆形、饼状图
sleepwalker_1992的专栏
06-04 7359
1、绘制圆形（arc) 概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。 * 语法：ctx.arc(x , y, r, sAngle, eAngle, counterclockwise); * arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk] * counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['...
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4465
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
html5的canvas知识总结（2）
zyz00000000的博客
09-13 215
1. rect()方法：画矩形 rect(x, y, w, h)：矩形左上角的点为起点（x, y），w，h是矩形的宽高；                             效果：          问：矩形的最后的画笔在哪里？  答：还在（x, y）起始位置。 rect方法结合stroke和fill方法，也可以使用：fillRect(x, y, w, h) 或 stroke...
ellipse()用法
zhouqian88423的专栏
12-06 1万+
ellipse()画椭圆弧函数功能：　函数ellipse()使用当前绘图色画一椭圆弧。用法：　该函数调用方式为void ellipse(int x,int y,int startangle,int endangle,                                        int xradius,int yradius);说明：　参数x,y为椭圆中心坐标，st
QT通过起点、终点、弧度（方向）来绘制圆弧
oop4587的博客
08-17 1万+
时间：2021-8-17 为了可以让自己使用起点、终点和弧度（方向）来直接绘制圆弧，我准备自己开发一个绘制圆弧的函数。在网上查了很多资料，并没有查到自己想要的。 1、说明 这里的起点、终点指的时圆弧通过的两点。而弧度方向指的是圆弧起点弧线的“切线”方向，下面用角度θ来表示，逆时针方向为正，顺时针方向为负。 如上图所示，已知P1、P2平面坐标和∠θ，需要利用QT绘图工具绘制出这一段圆弧。用户只需要输入P1、P2、P3三点即可，其中P3只要方向在直线P1P3方向上即可。 需要求出： ①...
【html5画布——使用canvas绘制圆形和弧形】| 前端面试题：介绍一下你对前端开发的理解和认识；
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
04-21 839
效果： 代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>绘制圆形和弧形</title> </head> <body> <canvas id="cavsElem" width='400' height="300"> 你的浏览器不支持canvas，请升级浏览器 </canva
HTML5之canvas-2圆 椭圆
09-05 111
Context.beginPath(); Context.arc(x,y,radius,startAngle,endAngle,anticlockwise);(for循环圆心、半径) Context.closePath(); Context.fillStyle=’rgba(255,0,0,0.25)’ Context.fill() ellipse(x,y,radiusX,rad...
<canvas>: canvas-id attribute is undefined
最新发布
05-31
<canvas id="myCanvas"></canvas> ``` And here's an example of how to reference this canvas element in JavaScript: ```javascript var canvas = document.getElementById("myCanvas"); ``` If you still ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值