欢迎来到天天文库
浏览记录
ID：5265442
大小：1.03 MB
页数：89页
时间：2017-12-07
《html5.canvas.教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、HTML5Canvas教程原作者：EricRowell原文地址：http://www.html5canvastutorials.com/翻译：ysm@http://iysm.net译者注：本文是来自于网络上的一个教程，英文原版在http://www.html5canvastutorials.com/。原文比较简单明了，适合初学入门，跟着上面的代码很快就能学会HTML5的Canvas基本的绘图功能。本文就是根据此文翻译而来，只不过原文中有些地方个人感觉介绍得过于简单，因此结合其他相关材料，根据自己的理解，对某些章节的内容
2、略作修改。如有什么不够准确的地方，请不吝赐教。谢谢。Part1:HTML5Canvas教程基础篇欢迎来到基础篇部分。在此，我们将主要看一下HTML5Canvas的基本绘图功能，包括画直线、画路径、图形绘制、渐变、模式、图像和文本。学前准备：在开始基础教程之前，您首先需要准备一个不太旧的web浏览器，比如GoogleChrome，Firefox，Safari，Opera，或者IE9这些都可以。然后您需要对Javascript有一定的熟悉，并且还得有一个文本编辑器，比如notepad。1.1HTML5Canvas1.1.1
3、HTML5Canvas的元素在HTML5页面里，canvas就是像
4、s">然后添加初始化Javascript函数：
5、vas>HTML5Canvas有关元素的说明上述代码将在本文后续中作为HTML5Canvas程序的基本模板。就像其他HTML标签一样，我们也可以用canvas标签的height和width属性为canvas指定其在页面上高度和宽度。在初始化Javascript函数中，我们可以用canvas标签的id获得canvas的DOM对象，并用getContext()方法获得这个canvas的“2d”上下文对象，其后的绘图操作都将以此上下文对象为基础。1.2直线1.2.1画直线画直线的功能可以用begi
6、nPath()，moveTo()，lineTo()和stroke()几个方法的组合来实现。如：效果图代码
8、>关于画直线的有关说明方法beginPath()定义了一个新的路径绘制动作的开始。方法moveTo()为指定点创建了一个新的子路径，这个点就变成了新的上下文点。我们可以把moveTo()方法看成用来定位我们的绘图鼠标用的。方法lineTo()以上下文点为起点，到方法参数中指定的点之间画一条直线。方法st
此文档下载收益归作者所有
