canvas的beginPath和closePath分析总结,包括多段弧的情况
参考博文:
Html5 canvas画图教程17:论beginPath的重要性
先看两个例子
例1:
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>var ctx = document.getElementById("myCanvas").getContext('2d');ctx.beginPath();ctx.moveTo(100.5,20.5);ctx.lineTo(200.5,20.5);ctx.strokeStyle = 'black';//默认strokeStyle='black', lineWidth=1, 此处可省略ctx.stroke();ctx.beginPath();ctx.moveTo(100.5,40.5);ctx.lineTo(200.5,40.5)ctx.strokeStyle = 'red';ctx.stroke();
</script>
结果:
例2:去掉第2个beginPath()
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>var ctx = document.getElementById("myCanvas").getContext('2d');ctx.beginPath();ctx.moveTo(100.5,20.5);//①ctx.lineTo(200.5,20.5);//②ctx.strokeStyle = 'black';//默认strokeStyle='black', lineWidth=1, 此处可省略ctx.stroke();ctx.moveTo(100.5,40.5);//③ctx.lineTo(200.5,40.5)//④ctx.strokeStyle = 'red';ctx.stroke();
</script>
结果:
1. beginPath
- canvas中的绘制方法(如stroke, fill),都会以“上一次beginPath”之后的所有路径为基础进行绘制。比如例2中stroke了两次,都是以第一次beginPath后的所有路径为基础画的。
- 第一次stroke:画①②,黑色
- 第二次stroke:画①②③④,红色(其中①②红色覆盖之前的黑色)
- 不管你用moveTo把画笔移动到哪里,只要不beginPath,那你一直都是在画一条路径(注:此处『一条路径』并非指连在一起)
- fillRect与strokeRect这种直接画出独立区域的函数,也不会打断当前的path.
2. closePath
- closePath的意思不是结束路径,而是关闭路径,它会试图从当前路径的终点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了
- 与beginPath几乎没有关系:不要企图通过闭合现有路径来开始一条新路径,而开始一条新路径,以前的路径也不会闭合。
对于绘制多段弧,看下面几个例子:
例3:
var context = document.getElementById("myCanvas").getContext('2d');
context.strokeStyle="#005588";
for (var i = 0; i < 10; i ++){context.beginPath();context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);context.closePath();context.stroke();
}
结果:
例4:在例3的基础上只去掉closePath()
var context = document.getElementById("myCanvas").getContext('2d');
context.strokeStyle="#005588";
for (var i = 0; i < 10; i ++){context.beginPath();context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);//context.closePath();context.stroke();
}
结果:
例5:在例3的基础上去掉beginPath()和closePath()
var context = document.getElementById("myCanvas").getContext('2d');
context.strokeStyle="#005588";
for (var i = 0; i < 10; i ++){//context.beginPath();context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);//context.closePath();context.stroke();
}
结果:
可见,在这种情况下,每个弧画完都会连到下一个弧的起点
例6:在例3的基础上只去掉beginPath()
var context = document.getElementById("myCanvas").getContext('2d');
context.strokeStyle="#005588";
for (var i = 0; i < 10; i ++){//context.beginPath();context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);context.closePath();context.stroke();
}
结果:
这样看不太清晰,我们将i < 10
改为i < 3
,只显示前三个:
可见,在这种情况下,每个弧画完都会先回到第一个弧的起点,然后再连到下一个弧的起点
例7:在例3的基础上将stroke()改为fill()
var context = document.getElementById("myCanvas").getContext('2d');context.fillStyle="#005588";for (var i = 0; i < 10; i ++){context.beginPath();context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);//context.closePath();context.fill();
}
结果:
例8:在例7的基础上去掉closePath()
var context = document.getElementById("myCanvas").getContext('2d');context.fillStyle="#005588";for (var i = 0; i < 10; i ++){context.beginPath();context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);context.closePath();context.fill();
}
结果:
比较例7和例8可知:
无论是否closePath(),结果都一样。
因为closePath()对于fill()是没有用的:无论是否closePath(),调用fill()时,canvas会自动把没有封闭的路径首尾相连,之后进行填充
转载于:https://www.cnblogs.com/xuehaoyue/p/6549682.html
canvas的beginPath和closePath分析总结,包括多段弧的情况相关推荐
- 关于beginPath()和closePath()的关系gt;gt;canvas的beginPath和closePath分析总结,包括多段弧的情况
今天查了一下beginPath()和closePath()关于区域的划分问题,发现到一篇解释得很明白的文章,我就直接转载到这里了. 原文请看:canvas的beginPath和closePath分析总 ...
- R语言使用aov函数进行单因素协方差分析(One-way ANCOVA)、单因素协方差分析(ANCOVA)扩展了单因素方差分析,包括一个或多个协变量(covariates)
R语言使用aov函数进行单因素协方差分析(One-way ANCOVA).单因素协方差分析(ANCOVA)扩展了单因素方差分析,包括一个或多个协变量(covariates) 目录
- 关键词分析应包括哪些内容?
关键词分析是指对网站或文档中出现的关键词进行定义.统计和分析的过程.关键词分析的内容可以包括以下几个方面: 关键词的定义和解释:对每个关键词进行详细的定义,包括其词性.含义.来源等. 关键词的出现频率 ...
- 利用 Python 分析了某化妆品企业的销售情况,我得出的结论是?
作者:Cherich_sun 来源:公众号「杰哥的IT之旅」ID:Jake_Internet [导语]本篇文章是关于某化妆品企业的销售分析.从分析思路思路开始带大家一步步的用python进行分析,找出 ...
- 【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【下篇】
简介:ECharts实现可视化大屏展示,包含人口分析,警情警力分析多张效果图, 完整的html+css+js+img:https://download.csdn.net/download/weixin ...
- python共享单车案例分析_python分析数据分析项目:共享单车租用情况影响因素探索分析...
python分析数据分析项目:共享单车租用情况影响因素探索分析
- 基于蒙特卡洛法 分析了风电和光伏的出力情况,之后以IEEE33节点为例进行概率潮流计算
基于蒙特卡洛法 分析了风电和光伏的出力情况,之后以IEEE33节点为例进行概率潮流计算(matlab程序实现) 基于蒙特卡洛方法进行随机抽样,其中风速满足威布尔分布从而预测功率分布,光伏采用光照强度预 ...
- 用tableau分析2016年各个国家自杀率情况案例
用tableau分析2016年各个国家自杀率情况案例 文章目录 分析目的 获取数据 数据清洗 数据处理 分析数据及展现方式 结论 仪表盘展示 分析目的 据资料显示,全球自杀人数呈递增趋势上涨.现在人们 ...
- ML之FE:Vintage曲线/Vintage分析(观察用户的全周期风险情况/明确用户风险的成熟期/确定逾期率何时趋向于稳定/从而选择合适的表现期)的简介、计算逻辑、案例应用之详细攻略
ML之FE:Vintage曲线/Vintage分析(观察用户的全周期风险情况/明确用户风险的成熟期/确定逾期率何时趋向于稳定/从而选择合适的表现期)的简介.计算逻辑.案例应用之详细攻略 目录 Vint ...
- 浅谈HTML5中canvas中的beginPath()和closePath()的重要性
beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要 先来看一小段代码: var ctx=document.getElementById("can ...
最新文章
- 双非的我科研如何超越双一流!
- NGINX访谈:软件负载均衡、API网关和服务网格的企业采用状况
- 同步和互斥在进程并发执行相互间会有什么影响
- Go 语言基础(一)
- WP8.1开发中关于如何显示.gif格式动态格式图片方法
- ctpn论文阅读与代码
- dsm php,docker dsm是什么?
- 微信公众平台PHP开发
- How to setup linked servers for SQL Server and Oracle 64 bit client
- 15. module create
- Zemax学习笔记(5)- 设计单透镜实例_2,分析
- <PCI-E> PCI-E的 x1/x4/x8/x16 四种插槽区别
- 2019新版c智播客h马程序员H5全栈工程师培训项目实战
- 汉字编码及显示原理总结
- [android]system.img文件的打包和解包
- DZY Loves Sequences (dp)
- 神经网络量化----吐血总结
- SQOOP 从 MySQL 导入到 Hive 之 Python 脚本
- python3打开文件的代码_Python读写文件的代码示例
- RK3399 10.0 打开双wifi STA+AP并发