资源描述：
《HTML 5的canvas元素教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、HTML5canvas——基本语法Posted04/23/2009-22:21bydaitao·canvas·HTML5HTML5canvas——基本语法作者MihaiSucan·2009年1月8日本文翻译自HTML5canvas-thebasics目录·简述·canvas基础·2DcontextAPIo基本线条o路径o插入图像o像素级操作o文字o阴影o颜色渐变·小节简述HTML5规范引进了很多新特性，其中最令人期待的之一就是canvas元素。HTML5canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个canvas元素都有一个"上下文(con
2、text)"(想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个canvas上下文，并通过不同的API提供图形绘制功能。大部分的浏览器都支持2Dcanvas上下文——包括Opera,Firefox,Konqueror和Safari。而且某些版本的Opera还支持3Dcanvas，Firefox也可以通过插件形式支持3Dcanvas：·下载支持3Dcanvas,HTMLvideo和FileI/O的Opera·关于Opera3Dcanvas上下文的文章·关于Firefox3Dcanvas上下文的文章本文介绍2Dcanvas基础以及如何使用基本canvas函数，如线条、形状、
3、图像和文字等。为了理解此文章，你最好了解JavaScript基础知识。可以点击此处批量下载本文实例代码canvas基础创建canvas的方法很简单，只需要在HTML页面中添加为了能在JavaScript中引用元素，最好给元素设置ID；也需要给canvas设定高度和宽度。创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用JavaScript。首
4、先通过getElementById函数找到canvas元素，然后初始化上下文。之后可以使用上下文API绘制各种图形。下面的脚本在canvas中绘制一个矩形(点击此处查看效果)：//Getareferencetotheelement.varelem=document.getElementById('myCanvas');//Alwayscheckforproperties和methods,tomakesureyourcodedoesn'tbreak//inotherbrowsers.if(elem&&elem.getContext){//Getthe2dcontext.//Remem
5、ber:youcanonlyinitializeonecontextperelement.varcontext=elem.getContext('2d');if(context){//Youaredone!Nowyoucandrawyourfirstrectangle.//Youonlyneedtoprovidethe(x,y)coordinates,followedbythewidthand//heightdimensions.context.fillRect(0,0,150,100);}}可以把上面代码放置在文档head部分中，或者放在外部文件中。2DcontextAPI介绍了
6、如何创建canvas后，让我们来看看2DcanvasAPI，看看能用这些函数做些什么。基本线条上面的例子中展示了绘制矩形是多么简单。通过fillStyle和strokeStyle属性可以轻松的设置矩形的填充和线条。颜色值使用方法和CSS一样：十六进制数、rgb()、rgba()和hsla()（若浏览器支持，如Opera10和Firefox3)。通过fillRect可以绘制带填充的矩形。使用strokeRect可以绘制只有边框没有填充的矩形。如果想清除部分canvas可以使用clearRect。上述三个方法的参数相同：x,y,width,height。前两个参数设定(x,y)坐标，后
7、两个参数设置矩形的高度和宽度。可以使用lineWidth属性改变线条粗细。让我们看看使用了fillRect,strokeRectclearRect和其他的例子：context.fillStyle='#00f';//bluecontext.strokeStyle='#f00';//redcontext.lineWidth=4;//Drawsomerectangles.context.fillRect(0,0,150,50);context.strokeRect(0,60
