浅谈HTML5中canvas中的beginPath()和closePath()的重要性

beginPath的作用很简单，就是开始一段新的路径，但在使用canvas绘图的过程中却非常重要

先来看一小段代码：

var ctx=document.getElementById("canvas").getContext("2d");ctx.beginPath();ctx.rect(150,150,100,100);ctx.fillStyle="green";ctx.fill();ctx.rect(0,0,100,100);ctx.fillStyle="yellow";ctx.fill();

我们的代码没有错误，但得到的却是两个边长100px的黄色的正方形，而不是一绿一黄，这是为什么呢？

事实上，canvas中的绘制方法（fill，stoke），都会以上一次“beginPath”之后的所有路径进行绘制，在上面的代码中第一个矩形fill了两次，第一次绿色，第二次黄色，所以得到了两个黄色矩形，同样的对于画线段，或其他曲线，图形，不管你moveTo到哪，只要你没有beiginPath，你都是在画一条路径。

如果你画的图形和你想象的不一致，记得查看一下beginPath。

谈到beginPath就不得不提一下closePath，事实上两者并无关系，closePath的意思是关闭路径，不是结束路径，它只是将路径的终点与起点相连，不是开始一个新路径。

我们在上面代码中第一个fill的后面添加一个closePath，得到的仍是两个黄色矩形。

但我们在后面添加一个beginPath，则得到两个不同颜色的矩形。

总而言之，不要试图通过闭合一段路径来开始新的路径，而且如果你不闭合路径，即使开始新的路径，其也不会闭合。

更多专业前端知识，请上【猿2048】www.mk2048.com

浅谈HTML5中canvas中的beginPath()和closePath()的重要性相关推荐

h5 vr效果_浅谈html5在vr中的应用
使用过HTML5制作动画过程的开发者都知道,HTML5页面给人一种逼真的感觉,同时HTML也是可以制作VR页面,但是需要你熟练HTML5与JavaScript开发过程,所以在有必要的情况下,我们可以用 ...
html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
python语法中infile语句_浅谈pymysql查询语句中带有in时传递参数的问题
直接给出例子说明: cs = conn.cursor() img_ids = [1,2,3] sql = "select img_url from img_url_table where i ...
计算机技术在农业上应用论文,浅谈计算机在农业中的应用论文(2)
浅谈计算机在农业中的应用论文篇二 <计算机技术在农业管理中的科学应用> 摘要:文章依据现代农业管理思想的内涵结合计算机应用技术的充分优势展开了如何在农业管理中全面应用计算机技术实现数字化. ...
浅谈线程池（中）：独立线程池的作用及IO线程池
在上一篇文章中,我们简单讨论了线程池的作用,以及CLR线程池的一些特性.不过关于线程池的基本概念还没有结束,这次我们再来补充一些必要的信息,有助于我们在程序中选择合适的使用方式. 独立线程池上次我们 ...
php编码 js解码,浅谈php和js中json的编码和解码
php中 1)编码 $jsonstr = json_encode($array) 2)解码 $arr = json_decode($jsonstr) echo json_encode("中文 ...
python查询数据库带逗号_浅谈pymysql查询语句中带有in时传递参数的问题
直接给出例子说明: cs = conn.cursor() img_ids = [1,2,3] sql = "select img_url from img_url_table where i ...
谈计算机知识对学生的作用,浅谈计算机在教学中的作用
浅谈计算机在教学中的作用时间:2017-07-19 08:54:57 浅谈计算机在教学中的作用计算机基础教育的教学目标是使学生掌握计算机的基本知识和操作技能,把计算机作为获取和交流信息的工具,为学 ...
浅谈surging服务引擎中的rabbitmq组件和容器化部署
1.前言上个星期完成了surging 的0.9.0.1 更新工作,此版本通过nuget下载引擎组件,下载后,无需通过代码build集成,引擎会通过Sidecar模式自动扫描装配异构组件来构建服务引擎 ...
python模型保存save_浅谈keras保存模型中的save()和save_weights()区别
今天做了一个关于keras保存模型的实验,希望有助于大家了解keras保存模型的区别. 我们知道keras的模型一般保存为后缀名为h5的文件,比如final_model.h5.同样是h5文件用save ...

浅谈HTML5中canvas中的beginPath()和closePath()的重要性

浅谈HTML5中canvas中的beginPath()和closePath()的重要性相关推荐

最新文章

热门文章