关于beginPath()和closePath()的关系canvas的beginPath和closePath分析总结,包括多段弧的情况...
今天查了一下beginPath()和closePath()关于区域的划分问题,发现到一篇解释得很明白的文章,我就直接转载到这里了。
原文请看:canvas的beginPath和closePath分析总结,包括多段弧的情况,作者是:妙音天女
先看两个例子
> 例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>
结果:
> beginPath
- canvas中的绘制方法(如stroke, fill),都会以“上一次beginPath”之后的所有路径为基础进行绘制。比如例2中stroke了两次,都是以第一次beginPath后的所有路径为基础画的。
- 第一次stroke:画①②,黑色
- 第二次stroke:画①②③④,红色(其中①②红色覆盖之前的黑色)
- 不管你用moveTo把画笔移动到哪里,只要不beginPath,那你一直都是在画一条路径(注:此处『一条路径』并非指连在一起)
- fillRect与strokeRect这种直接画出独立区域的函数,也不会打断当前的path.
> beginPath
- 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/jacobb/p/6814325.html
关于beginPath()和closePath()的关系canvas的beginPath和closePath分析总结,包括多段弧的情况...相关推荐
- 关于beginPath()和closePath()的关系gt;gt;canvas的beginPath和closePath分析总结,包括多段弧的情况
今天查了一下beginPath()和closePath()关于区域的划分问题,发现到一篇解释得很明白的文章,我就直接转载到这里了. 原文请看:canvas的beginPath和closePath分析总 ...
- R语言使用Predict函数计算指定连续变量和风险比HR值的关系、基于限制性立方样条分析方法、限制性立方样条cox回归模型
R语言使用Predict函数计算指定连续变量和风险比HR值的关系.基于限制性立方样条分析方法.限制性立方样条cox回归模型 目录
- 微信小程序 canvas type = 2d 绘制海报心得(包括怎么绘制图片和圆角图片和圆角矩形等)
微信小程序 canvas type=2d 使用心得 为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
- 手把手地教你怎么用canvas的rotate做出类似太阳系(包括月球的公转)的嵌套运动
需要运用到的关于canvas的一些代码 save()方法把当前状态的一份拷贝压入到一个保存图像状态的栈中.这就允许您临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值. 可是要注意 ...
- canvas 的动画卡顿问题(运行一段时间卡顿)
最近公司有项目需要写纯canvas组件,所以花了一段时间学习了下canvas. canvas这东西上手简单,精通难.而且也很少纯canvas写,所以网上参考的内容也比较少. 这里记录我用canvas遇 ...
- 位置关系C语言,C++/STL实现判断平面内两条线段的位置关系代码示例
概念 平面内两条线段位置关系的判定在很多领域都有着广泛的应用,比如游戏.CAD.图形处理等,而两线段交点的求解又是该算法中重要的一环.本文将尽可能用通俗的语言详细的描述一种主流且性能较高的判定算法. ...
- 方向余弦阵、四元数、等效旋转矢量的关系和不可交换误差的分析
四元数.等效旋转矢量意义及其原理 四元数:因为旋转轴的位置(定轴或不定轴).旋转角度是四个数,故而矩阵的变换可以由四个数表示,即四元数的表达矩阵旋转形式 等效旋转矢量:矩阵沿着旋转轴u(定轴或不定轴) ...
- Deepdive关系抽取:特征源码分析及优化加快信息提取
前言 本篇不是Deepdive入门教程,而是对其一些源码细节进行了解读,换句话说要深入到内部去看看其具体是怎么做的,所以看本篇的前提是假设读者已经大概清楚了deepdive的使用流程,如果不是很熟悉, ...
- python面对对面编程对三国演义,水浒传,红楼梦人物关系与出场频率进行文本分析,数据可视化
python对文本进行分析和数据可视化,主要运用到了jieba,worldcloudmatplotlib,nxwworkx,pandas库,其他库在代码中给出. 1.首先准备好这三本名著 2.准备好停 ...
- python对三国演义,水浒传,红楼梦人物关系与出场频率进行文本分析,数据可视化,词云分析
python对文本进行分析和数据可视化,主要运用到了jieba,worldcloudmatplotlib,nxwworkx,pandas库,其他库在代码中给出. 1.首先准备好这三本名著 2.准备好停 ...
最新文章
- python中使用html前端页面显示图像预测结果(Pycharm)
- Eclipse4.4设备egit插件提交本地项目代码到远程仓库
- ctype_digit()函数
- JAVA程序禁用Hbase中的表_HBase禁用表
- 软件设计期末考试重点内容
- 技术她力量,鹅厂女博士的寻“豹”之旅
- linux7 无法连接网络,CentOS7无法连接网络怎么办
- 微软 WPF 框架源码现已托管至 GitHub
- es管理器免root_OPPO手机免ROOT更换系统字体教程-适合大部分OPPO机型
- rsyslog官方文档
- 【优化算法】粒子群优化模拟器【含Matlab源码 1553期】
- 系统服务器断电数据会丢失吗,服务器断电数据丢失恢复原理和图文过程
- java程序员面试简历注意事项
- Unity Android Unable to load resource的问题
- 鼠标到达a标签时变成手型
- linux进阶-ssh命令的使用技巧全get
- 前端树形图(未完成完善,会持续更新)
- JVM - 双亲委派
- JAVA与PLC通讯读取数据(两种方式)
- 怎么把视频里的音乐提取成音频?
热门文章
- 卷积神经网络第四周作业1 - Face Recognition for the Happy House - v1
- KMeans聚类算法思想与可视化
- Python学习笔记(未完)
- 20170910算法工程师在线笔试之求第n个丑数
- r语言算巢式设计方差分析_R语言进行方差分析
- 调度 Cmax和∑Ci是什么区别
- C++ 单元测试框架 Boost Test BOOST_AUTO_TEST_CASE
- java -cp 什么意思 怎么用
- Hyperledger Fabric教程(11)-- 链码和背书策略
- linux挂载sata硬盘分区,Linux下挂载硬盘分区的几种方法