canvas beginPath()的初步理解

canvas的坑真是太大了，w3school上也只是一些简单的例子，还得自己好好研究下。刚学到beginpath()，意思是开始画一条线。

来段代码

<html>
<head><title>canvas</title>
</head>
<canvas id=myCanvas width=500px height=500px></canvas><script>var myCanvas = document.getElementById("myCanvas");var context = myCanvas.getContext("2d");context.fillStyle = "#000";context.fillRect(0,0,500,500);context.beginPath();context.moveTo(100,100);context.lineTo(200,100);context.strokeStyle = "red";context.stroke();context.beginPath();context.moveTo(100,200);context.lineTo(200,200);context.strokeStyle = "blue";context.stroke();context.beginPath();context.moveTo(100,300);context.lineTo(200,300);context.strokeStyle = "yellow";context.stroke();
</script>
</html>

在不修改代码的前提下，显示的样式是会出现红、蓝、黄、三条线

接下来我们注释第2个stroke()，发现第2根蓝线消失了，仅仅显示红线和黄线。stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

当我们把3个beginPath() 注释起来，神奇的事情就发生了：依次出现了橙、绿、黄三条线。情况貌似是在没有beginPath()的情况下，stroke会叠加执行，即：第一个stroke会画一条红线；第二个stroke会画两条蓝线，第三个stroke会画三条黄线，那么对应的上面橙色线条就是红蓝黄的叠加色，中间绿色就是红和蓝的叠加色，最后的黄色，就是黄色。

转载于:https://www.cnblogs.com/guaiyutou/p/4123649.html

canvas beginPath()的初步理解相关推荐

如何让人大致理解RxJava思想：第一节初步理解RxJava
如何让人大致理解RxJava思想:第一节初步理解RxJava 首先,我们需要明确,一个人不可能一口气吃成一个胖子,你不可能仅仅花5分钟看完我这篇文章,然后一拍桌子,大叫一声,我知道了,然后赢取白富美 ...
JAVA 枚举类的初步理解
JAVA 枚举类的初步理解现在Java的枚举类在真实项目中已经用的比较频繁,比静态常量更好用,也更有限定性,enum类可以用来表示有限的类对象,比如星期.月份.性别或者项目中的产品类型像诸如此类的 ...
非常易于理解‘类'与'对象’ 间属性引用关系，暨《Python 中的引用和类属性的初步理解》读后感...
关键字:名称,名称空间,引用,指针,指针类型的指针(即指向指针的指针) 我读完后的理解总结: 1. 我们知道,python中的变量的赋值操作,变量其实就是一个名称name,赋值就是将name引用到一个 ...
初步理解pagerank算法
初步理解pagerank算法第一次写不是课程要求的博客,可能有不严谨的地方,如果有写错的希望能在评论区指出. 算法思想 pagerank算法用于网页排序,根据给网页的重要程度给各个网页打分,根据分数 ...
Adaboost算法的初步理解
菜鸟初次接触Adaboost,虽然算法流程比较清晰简单,但对于其中的理论,存在着不少疑惑之处,如下所示: 1)如何训练得到的弱分类器,我们需要训练出多少个弱分类器进行后续的计算?对若分类器有什么要求吗 ...
我对SNS游戏的初步理解
国庆期间,我专门研究了一款SNS游戏,巴别小精灵,这是一款背单词的游戏.算是一款交互式英语学习的应用.一点初步理解和体会,与大家分享. SNS游戏的特点 (1) 异步性 (2) 真 ...
Hamiltonian Monte Carlo抽样算法的初步理解
Hamiltonian Monte Carlo抽样算法的初步理解接受拒绝采样算法 MCMC回顾 Hamiltonian dynamics 拉格朗日方程从牛顿方程出发推导拉格朗日方程勒让德变换哈 ...
红黑树插入操作的初步理解
红黑树插入操作的初步理解文章目录红黑树插入操作的初步理解红黑树的特征红黑树的插入节点总是红色的红黑树的修正变色左旋右旋插入操作插入操作的代码实现红黑树和AVL树的对比参考链接 ...
wmts格式说明_WMTS服务初步理解与读取
WMTS 服务初步理解与读取当前在网络地图服务中,大部分都会采取缓存技术来替代实时对数据进行可视化,用以提高地图响应能力.介绍 OGC 提出的缓存技术标准的 WMTS 服务. WMTS 简介 WM ...

canvas beginPath()的初步理解

canvas beginPath()的初步理解相关推荐

最新文章

热门文章