搜索
HTML5资料-非常好1Canvas教程canvas是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple(andnotsosimple)animations.1.1基本用法canvas元素让我们从canvas元素的定义开始吧。canvasid=tutorialwidth=150height=150/canvascanvas看起来很像img，唯一不同就是它不含src和alt属性。它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。如果不指定width和height，默认的是宽300像素，高150像素。虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width和height属性值）。id属性不是canvas专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其id值。一般，为元素指定id是个不错的主意，这样使得在脚本中应用更加方便。canvas元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式，canvas默认是全透明的。替用内容因为canvas相对较新，有些浏览器并没实现，如Firefox1.0和InternetExplorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：canvasid=stockGraphwidth=150height=150currentstockprice:$3.15+0.15/canvascanvasid=clockwidth=150height=150imgsrc=images/clock.pngwidth=150height=150//canvas结束标签/canvas是必须的在AppleSafari里，canvas的实现跟img很相似，它并不没有结束标签。然而，为了使canvas能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(/canvas)是必须的。如果没有替用内容，canvasid=foo.../canvas对Safari和Mozilla是完全兼容的——Safari会简单地忽略结束标签。如果有替用内容，那么可以用一些CSS技巧来为并且仅为Safari隐藏替用内容，因为那些替用内容是需要在IE里显示但不需要在Safari里显示。渲染上下文（RenderingContext）canvas创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（renderingcontext），我们可以通过它们来控制要显示的内容。我们专注于2D渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGLES的3D上下文。canvas初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（renderingcontext），它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图用的函数。getContext()接受一个用于描述其类型的值作为参数。varcanvas=document.getElementById('tutorial');varctx=canvas.getContext('2d');上面第一行通过getElementById方法取得canvas对象的DOM节点。然后通过其getContext方法取得其画图操作上下文。检查浏览器的支持除了在那些不支持的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持canvas。方法很简单，判断getContext是否存在即可。varcanvas=document.getElementById('tutorial');if(canvas.getContext){varctx=canvas.getContext('2d');//drawingcodehere}else{//canvas-unsupportedcodehere}代码模板我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以下载文件到本地备用。htmlheadtitleCanvastutorial/titlescripttype=text/javascriptfunctiondraw(){varcanvas=document.getElementById('tutorial');if(canvas.getContext){varctx=canvas.getContext('2d');}}/scriptstyletype=text/csscanvas{border:1pxsolidblack;}/style/headbodyonload=draw();canvasid=tutorialwidth=150height=150/canvas/body/html细心的你会发现我准备了一个名为draw的函数，它会在页面装载完毕之后执行一次（通过设置body标签的onload属性），它当然也可以在setTimeout，setInterval，或者其他事件处理函数中被调用。一个简单的例子作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。观看示例htmlheadscripttype=application/x-javascriptfunctiondraw(){varcanvas=document.getElementById(canvas);if(canvas.getContext){varctx=canvas.getContext(2d);ctx.fillStyle=rgb(200,0,0);ctx.fillRect(10,10,55,50);ctx.fillStyle=rgba(0,0,200,0.5);ctx.fillRect(30,30,55,50);}}/script/headbodyonload=draw();canvasid=canvaswidth=150height=150/canvas/body/html1.2绘图Drawingshapes绘制图形网格Thegrid在真正开始之前，我们需要先探讨canvas的网格（grid）或者坐标空间（coordinatespace）。在前一页的HTML模板里有一个150像素宽，150像素高的canvas对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应canvas上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x,y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。绘制图形Drawingshapes不像SVG，canvas只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。矩形Rectangles我们首先看看矩形吧，有三个函数用于绘制矩形的：fillRect(x,y,width,height):DrawsafilledrectanglestrokeRect(x,y,width,height):DrawsarectangularoutlineclearRect(x,y,width,height):Clearsthespecifiedareaandmakesitfullytransparent它们都接受四个参数，x和y指定矩形左上角(相对于原点)的位置，width和height是矩形的宽和高。好，实战一下吧。下面就是上页模板里的draw()函数，但添加了上面的三个函数。绘制矩形的例子Rectangularshapeexample观看示例functiondraw(){varcanvas=document.getElementById('tutorial');if(canvas.getContext){varctx=canvas.getContext('2d');ctx.fillRect(25,25,100,100);ctx.clearRect(45,45,60,60);ctx.strokeRect(50,50,50,50);}}出来的结果应该和右边的是一样的。fillRect函数画了一个大的黑色矩形（100x100），clearRect函数清空了中间60x60大小的方块，然后strokeRect函数又在清空了的空间内勾勒出一个50x50的矩形边框。在接下去的页面里，我们会看到和clearRect函数差不多另外两个方法，以及如何去改变图形的填充和边框颜色。与下一节的路径函数不一样，这三个函数的效果会立刻在canvas上反映出来。绘制路径Drawingpaths不像画矩形那样的直截了当，绘制路径是需要一些额外的步骤的。beginPath()closePath()stroke()fill()第一步是用beginPath创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用beginPath，子路径组都会被重置，然后可以绘制新的图形。第二步就是实际绘制路径的部分，很快我们就会看到。第三步是调用closePath方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。最后一步是调用stroke或fill方法，这时，图形才是实际的绘制到canvas上去。stroke是绘制图形的边框，fill会用填充出一个实心图形。注意：当调用fill时，开放的路径会自动闭合，而无须调用closePath。画一个简单图形（如三角形）的代码如下。ctx.beginPath();ctx.moveTo(75,50);ctx.lineTo(100,75);ctx.lineTo(100,25);ctx.fill();moveTo是一个十分有用的方法，虽然并不能用它来画什么，但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。moveTo(x,y)它接受x和y（新的坐标位置）作为参数。当canvas初始化或者调用beginPath的时候，起始坐标设置就是原点(0,0)。大多数情况下，我们用moveTo方法将起始坐标移至其它地方，或者用于绘制不连续的路径。看看右边的笑脸，红线就是使用moveTo移动的轨迹。试一试下面的代码，粘贴到之前用过的draw函数内在看看效果吧。moveTo的使用示例观看示例ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true);//Outercirclectx.moveTo(110,75);ctx.arc(75,75,35,0,Math.PI,false);//Mouth(clockwise)ctx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true);//Lefteyectx.moveTo(95