HTML5资料Canvas教程剖析.docx

HTML5资料Canvas教程剖析.docx

《HTML5资料Canvas教程剖析.docx》由会员分享，可在线阅读，更多相关《HTML5资料Canvas教程剖析.docx（70页珍藏版）》请在冰豆网上搜索。

HTML5资料Canvas教程剖析

HTML5资料-非常好

1Canvas教程

是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。

例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。

Itcanforinstancebeusedtodrawgraphs,makephotocompositionsordosimple（andnotsosimple）animations.

1.1基本用法

 元素

让我们从元素的定义开始吧。

看起来很像，唯一不同就是它不含src和alt属性。

它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。

如果不指定width和height，默认的是宽300像素，高150像素。

虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width和height属性值）。

id 属性不是专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其id值。

一般，为元素指定id是个不错的主意，这样使得在脚本中应用更加方便。

元素可以像普通图片一样指定其样式（边距，边框，背景等等）。

然而这些样式并不会对canvas实际生成的图像产生什么影响。

下面我们会看到如何应用样式。

如果不指定样式，canvas默认是全透明的。

替用内容

因为相对较新，有些浏览器并没实现，如Firefox1.0和InternetExplorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

我们只需要直接在canvas元素内插入替用内容即可。

不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。

例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

 currentstockprice:

$3.15+0.15

结束标签是必须的

在AppleSafari里，的实现跟很相似，它并不没有结束标签。

然而，为了使能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签（）是必须的。

如果没有替用内容，对Safari和Mozilla是完全兼容的——Safari会简单地忽略结束标签。

如果有替用内容，那么可以用一些CSS技巧来为并且仅为Safari隐藏替用内容，因为那些替用内容是需要在IE里显示但不需要在Safari里显示。

渲染上下文（RenderingContext）

创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（renderingcontext），我们可以通过它们来控制要显示的内容。

我们专注于2D渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGLES的3D上下文。

初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（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

}

代码模板

我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以下载文件到本地备用。

   

     functiondraw（）{

       varcanvas=document.getElementById（'tutorial'）;

       if（canvas.getContext）{

         varctx=canvas.getContext（'2d'）;

       }

     }

     canvas{border:

1pxsolidblack;}

细心的你会发现我准备了一个名为draw的函数，它会在页面装载完毕之后执行一次（通过设置body标签的onload属性），它当然也可以在setTimeout，setInterval，或者其他事件处理函数中被调用。

一个简单的例子

作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。

我们会在后面的示例中详细的让你了解它是如何运作的。

观看示例 

   functiondraw（）{

     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）;

     }

   }

1.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）:

Drawsafilledrectangle

strokeRect（x,y,width,height）:

Drawsarectangularoutline

clearRect（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）;//Outercircle

ctx.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）; //Lefteye

ctx.moveTo（95,65）;

ctx.arc（90,65,5,0,Math.PI*2,true）; //Righteye

ctx.stroke（）;

//thegoneheart完整例子

ctx.beginPath（）;

ctx.arc（75,75,50,0,Math.PI*2,true）;//Outercircle

ctx.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）; //Lefteye

ctx.moveTo（95,65）;

ctx.arc（90,65,5,0,Math.PI*2,true）; //Righteye

ctx.stroke（）;

ctx.beginPath（）;

ctx.moveTo（40,75）;

ctx.lineTo（60,65）;

ctx.lineTo（90,65）;

ctx.moveTo（110,75）;

ctx.lineTo（125,75）;

ctx.stroke（）;

注意：

你可以注释moveTo方法来观察那些连接起来的线。

注意：

arc方法的用法见下面。

绘制各种线条Lines

我们用lineTo方法来画直线。

lineTo（x,y）

lineTo方法接受终点的坐标（x，y）作为参数。

起始坐标取决于前一路径，前一路径的终点即当前路径的起点，起始坐标也可以通过moveTo方法来设置。

lineTo的使用示例

示例（如右图）画的是两个三角形，一个实色填充，一个勾边。

首先调用beginPath方法创建一个新路径，然后用moveTo方法将起始坐标移至想要的位置，然后画两条直线来构成三角形的两条边。

可以注意到fill和strok绘三角形的区别，上面也提到过，使用fill路径会自动闭合，但使用stroke不会，如果不关闭路径，勾画出来的只有两边。

观看示例

//填充三角形

ctx.beginPath（）;

ctx.moveTo（25,25）;

ctx.lineTo（105,25）;

ctx.lineTo（25,105）;

ctx.fill（）;

//勾边三角形

ctx.beginPath（）;

ctx.moveTo（125,125）;

ctx.lineTo（125,45）;

ctx.lineTo（45,125）;

ctx.closePath（）;

ctx.stroke（）; 

弧线Arcs

我们用arc方法来绘制弧线或圆。

标准说明中还包含arcTo方法，当前Safari是支持的，但基于Gecko的浏览器还未实现。

arc（x,y,radius,startAngle,endAngle,anticlockwise）

方法接受五个参数：

x，y是圆心坐标，radius是半径，startAngle和endAngle分别是起末弧度（以x轴为基准），anticlockwise为true表示逆时针，反之顺时针。

警告：

在Firefox的beta版本里，最后一个参数是clockwise，而最终版本不是。

因此如果是从beta升级至发行版需要做相应修改。

注意：

arc方法里用到的角度是以弧度为单位而不是度。

度和弧度直接的转换可以用这个表达式：

varradians=（Math.PI/180）*degrees;。

arc的使用示例

这个示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。

如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。

像我这里画90，180和270度的弧形看起来不是很麻烦，但是如果图形更复杂一些,则实现起来会越来越困难。

这里使用两个for循环来画多行多列的弧形。

每一个弧形都用beginPath方法创建一个新路径。

然后为了方便阅读和理解，我把所有参数都写成变量形式。

显而易见，x和y作为圆心坐标。

radius和startAngle都是固定，endAngle从180度半圆开始，以90度方式递增至圆。

anticlockwise则取决于奇偶行数。

最后，通过if语句判断使前两行表现为勾边，而后两行为填充效果。

观看示例

for（i=0;i<4;i++）{

  for（j=0;j<3;j++）{   //chinese_xu原始代码

   ctx.beginPath（）;

   varx             =25+j*50;//xcoordinate

   vary             =25+i*50;//ycoordinate

   varradius        =20;//Arcradius

   varstartAngle    =0;//Startingpointoncircle

   varendAngle      =Math.PI+（Math.PI*j）/2； //Endpointoncircle

   varanticlockwise =i%2==0?

false:

true;//clockwiseoranticlockwise

ctx.arc（x,y,radius,startAngle,endAngle,anticlockwise）;

 if（i>1）{

     ctx.fill（）;

   }else{

     ctx.stroke（）;

   }

 }

}

//chinese_xu原始代码并没有按照1/4圆递增来画。

//修改后输出4行4列，要把画布扩大到200*200观看

for（i=0;i<4;i++）{

  for（j=0;j<4;j++）{    

   ctx.beginPath（）;

   varx             =25+j*50;//xcoordinate

   vary             =25+i*50;//ycoordinate

   varradius        =20;//Arcradius

   varstartAngle    =0;//Startingpointoncircle

   varendAngle      =Math.PI*（2-j/2）;  //Endpointoncircle

   varanticlockwise =i%2==0?

false:

true;//clockwiseoranticlockwise

   ctx.arc（x,y,radius,startAngle,endAngle,anticlockwise）;

   if（i>1）{

     ctx.fill（）;

   }else{

     ctx.stroke（）;

   }

 }

}

贝塞尔和二次方曲线Bezierandquadraticcurves

 接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。

quadraticCurveTo（cp1x,cp1y,x,y）//BROKENinFirefox1.5（seeworkaroundbelow）

bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y）

上面两行代码的区别见右图。

它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。

参数x和y是终点坐标，cp1x和cp1y是第一个控制点的坐标，cp2x和cp2y是第二个的。

使用二次方和三次方的贝塞尔曲线是相当有挑战的，因为不像在矢量绘图软件AdobeIllustrator里那样有即时的视觉反馈。

因为用它来画复杂图形是比较麻烦的。

但如果你有时间，并且最重要是有耐心，再复杂的图形都可以绘制出来的。

下面我们来画一个简单而又规律的图形。

这些例子都比较简单。

我们绘制的都是完整的图形。

quadraticCurveTo的使用示例

查看示例 

//Quadratriccurvesexample

ctx.beginPath（）;

ctx.moveTo（75,25）;

ctx.quadraticCurveTo（25,25,25,62.5）;

ctx.quadraticCurveTo（25,100,50,100）;

ctx.quadraticCurveTo（50,120,30,125）;

ctx.quadraticCurveTo（60,120,65,100）;

ctx.quadraticCurveTo（125,100,125,62.5）;

ctx.quadraticCurveTo（125,25,75,25）;

ctx.stroke（）;

通过计算，可以由二次曲线的单个控制点得出相应三次方曲线的两个控制点，因此二次方转三次方是可能的，但是反之不然。

仅当三次方程中的三次项为零是才可能转换为二次的贝塞尔曲线。

通常地可以用多条二次方曲线通过细分算法来近似模拟三次方贝塞尔曲线。

bezierCurveTo的使用示例

查