仓酷云

标题: 来看看：HTML 5 canvas 基础语法 [打印本页]
作者: 精灵巫婆    时间: 2015-1-15 23:19
标题: 来看看：HTML 5 canvas 基础语法
使得W3C与非正式的WHATWG(网络超文本应用程序技术工作小组)关系开始紧张起来。这些年来，一直是WHATWG肩负起HTML的重责大任。网页制造poluoluo文章简介：HTML5标准引进了良多新特征，个中最使人等候的之一就是canvas元素。HTML5canvas供应了经由过程JavaScript绘制图形的办法，此办法利用复杂但功效壮大。每个canvas元素都有一个"高低文(context)"(设想成画图板上的一页)，在个中能够绘制恣意图形。扫瞄器支
HTML5canvas——基础语法

简述

5标准引进了良多新特征，个中最使人等候的之一就是canvas元素。HTML5canvas供应了经由过程JavaScript绘制图形的办法，此办法利用复杂但功效壮大。每个canvas元素都有一个"高低文(context)"(设想成画图板上的一页)，在个中能够绘制恣意图形。扫瞄器撑持多个canvas高低文，并经由过程分歧的供应图形绘制功效。供应图形绘制功效。5标准引进了良多新特征，个中最使人等候的之一就是元素。HTML5供应了经由过程JavaScript绘制图形的办法，此办法利用复杂但功效壮大。每个元素都有一个"高低文(context)"(设想成画图板上的一页)，在个中能够绘制恣意图形。扫瞄器撑持多个canvas高低文，并经由过程分歧的供应图形绘制功效。
年夜部分的扫瞄器都撑持2Dcanvas高低文——包含Opera,Firefox,Konqueror和Safari。并且某些版本的Opera还撑持3Dcanvas，Firefox也能够经由过程插件情势撑持3Dcanvas：

本文先容2Dcanvas
基本和怎样利用基础canvas函数，如线条、外形、图象和笔墨等。为了了解此文章，你最好懂得JavaScript基本常识。
能够点击此处批量下载本文实例代码
canvas基本

创立canvas的办法很复杂，只必要在HTML页面中增加<canvas>元素：
  1. <canvasid="myCanvas"width="300"height="150">Fallbackcontent,incasethebrowserdoesnotsupportCanvas.</canvas>
复制代码
为了能在JavaScript中援用元素，最好给元素设置ID；也必要给canvas设定高度和宽度。
创立好了画布后，让我们来筹办画笔。要在画布中绘制图形必要利用JavaScript。起首经由过程getElementById函数找到canvas
元素，然后初始化高低文。以后可使用高低文API绘制各类图形。上面的剧本在canvas中绘制一个矩形(点击此处检察效果)：
  1. //Getareferencetotheelement.varelem=document.getElementById(myCanvas);//Alwayscheckforproperties和methods,tomakesureyourcodedoesntbreak//inotherbrowsers.if(elem&&elem.getContext){//Getthe2dcontext.//Remember:youcanonlyinitializeonecontextperelement.varcontext=elem.getContext(2d);if(context){//Youaredone!Nowyoucandrawyourfirstrectangle.//Youonlyneedtoprovidethe(x,y)coordinates,followedbythewidthand//heightdimensions.context.fillRect(0,0,150,100);}}
复制代码
能够把下面代码安排在文档head部分中，大概放在内部文件中。
2DcontextAPI

先容了怎样创立canvas后，让我们来看看2DcanvasAPI，看看能用这些函数做些甚么。
基础线条

下面的例子中展现了绘制矩形是何等复杂。
经由过程fillStyle和strokeStyle属性能够轻松的设置矩形的添补和线条。色彩值利用办法和十六进制数、()、()和()（若扫瞄器撑持，如Opera
10和Firefox3)。()（若扫瞄器撑持，如Opera10和Firefox3)。()和()（若扫瞄器撑持，如Opera10和Firefox3)。()、()和()（若扫瞄器撑持，如Opera10和Firefox3)。十六进制数、()、()和()（若扫瞄器撑持，如Opera10和Firefox3)。
经由过程fillRect能够绘制带添补的矩形。利用strokeRect能够绘制只要边框没有添补的矩形。假如想扫除部分canvas可使用clearRect。上述三个办法的参数不异：x,y,width,height。前两个参数设定(x,y)坐标，后两个参数设置矩形的高度和宽度。
可使用lineWidth属性改动线条粗细。让我们看看利用了fillRect,
strokeRectclearRect和其他的例子：
  1. context.fillStyle=#00f;//bluecontext.strokeStyle=#f00;//redcontext.lineWidth=4;//Drawsomerectangles.context.fillRect(0,0,150,50);context.strokeRect(0,60,150,50);context.clearRect(30,25,90,60);context.strokeRect(30,25,90,60);
复制代码
此例子最终效果见.
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:fillRect,strokeRect和
clearRect最终效果
路径

经由过程canvas路径（path）能够绘制恣意外形。能够先绘制表面，然后绘制边框和添补。创立自界说外形很复杂，利用beginPath()入手下手绘制，然后利用直线、曲线和其他图形绘制你的图形。绘制终了后挪用fill和stroke便可增加添补大概设置边框。挪用closePath()停止自界说图形绘制。
上面是一个绘制三角形的例子：
  1. //Setthestyleproperties.context.fillStyle=#00f;context.strokeStyle=#f00;context.lineWidth=4;context.beginPath();//Startfromthetop-leftpoint.context.moveTo(10,10);//givethe(x,y)coordinatescontext.lineTo(100,10);context.lineTo(10,100);context.lineTo(10,10);//Done!Nowfilltheshape,和drawthestroke.//Note:yourshapewillnotbevisibleuntilyoucallanyofthetwomethods.context.fill();context.stroke();context.closePath();
复制代码
其最终效果见.
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:三角形
另外一个较卖力的例子中利用了直线、曲线和圆弧。
拔出图象

drawImage办法同意在canvas中拔出其他图象
(img和canvas元素)。在Opera中能够再canvas中绘制SVG图形。此办法对照庞大，能够有3个、5个或9个参数：

上面是上述三个利用办法的例子：
  1. //Threearguments:theelement,destination(x,y)coordinates.context.drawImage(img_elem,dx,dy);//Fivearguments:theelement,destination(x,y)coordinates,anddestination//widthandheight(ifyouwanttoresizethesourceimage).context.drawImage(img_elem,dx,dy,dw,dh);//Ninearguments:theelement,source(x,y)coordinates,sourcewidthand//height(forcropping),destination(x,y)coordinates,anddestinationwidth//andheight(resize).context.drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);
复制代码
其效果见.
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:drawImage最终效果。
像素级操纵

2DContextAPI供应了三个办法用于像素级操纵：createImageData,getImageData,和
putImageData。
ImageData工具保留了图象像素值。每一个工具有三个属性:width,height和
data。data属性范例为CanvasPixelArray，用于贮存width*height*4个像素值。每个像素有RGB值和通明度alpha值(其值为0至
255，包含alpha在内!)。像素的按次从左至右，从上到下，按行存储。
为了更好的了解其道理，让我们来看一个例子——绘制白色矩形
  1. //CreateanImageDataobject.varimgd=context.createImageData(50,50);varpix=imgd.data;//Loopovereachpixel和setatransparentred.for(vari=0;n=pix.length,i<n;i+=4){pix[i]=255;//redchannelpix[i+3]=127;//alphachannel}//DrawtheImageDataobjectatthegiven(x,y)coordinates.context.putImageData(imgd,0,0);
复制代码
注重:不是一切扫瞄器都完成了createImageData。在撑持的扫瞄器中，必要经由过程getImageData办法猎取ImageData工具。请参考示例代码。
经由过程ImageData能够完成良多功效。如能够完成图象滤镜，或能够完成数学可视化(如分形和其他殊效)。上面殊效完成了复杂的色彩反转滤镜：
  1. //GettheCanvasPixelArrayfromthegivencoordinatesanddimensions.varimgd=context.getImageData(x,y,width,height);varpix=imgd.data;//Loopovereachpixelandinvertthecolor.for(vari=0,n=pix.length;i<n;i+=4){pix[i]=255-pix[i];//redpix[i+1]=255-pix[i+1];//greenpix[i+2]=255-pix[i+2];//blue//i+3isalpha(thefourthelement)}//DrawtheImageDataatthegiven(x,y)coordinates.context.putImageData(imgd,x,y);
复制代码
显现了利用此滤镜后的Opera
图象(是原始图片)。
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:色彩反转滤镜
笔墨

固然比来的WebKit版本和Firefox3.1nightlybuild才入手下手撑持TextAPI，为了包管文章完全性我决意仍在这里先容笔墨API。
context工具能够设置以下text属性：

有两个办法能够绘制笔墨：fillText和strokeText。第一个绘制带fillStyle添补的笔墨，后者绘制只要strokeStyle边框的笔墨。二者的参数不异：要绘制的笔墨和笔墨的地位(x,y)坐标。另有一个可选选项——最年夜宽度。假如必要的话，扫瞄器会缩减笔墨以让它顺应指定宽度。
笔墨对齐属性影响笔墨与设置的
(x,y)坐标的绝对地位。
上面是一个在canvas中绘制"helloworld"笔墨的例子
  1. context.fillStyle=#00f;context.font=italic30pxsans-serif;context.textBaseline=top;context.fillText(Helloworld!,0,0);context.font=bold30pxsans-serif;context.strokeText(Helloworld!,0,50);
复制代码
是其最终效果。
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:笔墨效果
暗影

今朝只要Konqueror和Firefox3.1nightlybuild撑持ShadowsAPI。API的属性为：

上面是canvas暗影的例子：
  1. context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowBlur=4;context.shadowColor=rgba(255,0,0,0.5);context.fillStyle=#00f;context.fillRect(20,20,150,100);
复制代码
其效果见。
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:canvas暗影效果——蓝色矩形，白色暗影
色彩突变

除CSS色彩，fillStyle和strokeStyle属性能够设置为CanvasGradient工具。——经由过程CanvasGradient能够为线条和添补利用色彩突变。
欲创立CanvasGradient工具，可使用两个办法：createLinearGradient和createRadialGradient。前者创立线性色彩突变，后者创立圆形色彩突变。
创立色彩突变工具后，可使用工具的addColorStop办法增加色彩两头值。
上面的代码演示了色彩突变利用办法：
  1. //Youneedtoprovidethesource和destination(x,y)coordinates//forthegradient(fromwhereitstarts和whereitends).vargradient1=context.createLinearGradient(sx,sy,dx,dy);//Nowyoucanaddcolorsinyourgradient.//Thefirstargumenttellsthepositionforthecolorinyourgradient.The//acceptedvaluerangeisfrom0(gradientstart)to1(gradientend).//Thesecondargumenttellsthecoloryouwant,usingtheCSScolorformat.gradient1.addColorStop(0,#f00);//redgradient1.addColorStop(0.5,#ff0);//yellowgradient1.addColorStop(1,#00f);//blue//Fortheradialgradientyoualsoneedtoprovidesource//和destinationcircleradius.//The(x,y)coordinatesdefinethecirclecenterpoints(start和//destination).vargradient2=context.createRadialGradient(sx,sy,sr,dx,dy,dr);//Addingcolorstoaradialgradientisthesameasaddingcolorstolinear//gradients.
复制代码
我也筹办了一个更庞大的例子，利用了线性色彩突变、暗影和笔墨。其效果见。
来看看：HTML 5 canvas 基础语法
登录/注册后可看大图


:利用线性色彩突变的例子
canvas演示

假如你想晓得利用Canvas能够做些甚么，能够参看以下的工程：

大节

Canvas是HTML5最使人等候的特征之一，今朝已取得年夜部分Web扫瞄器撑持。Canvas能够匡助创立游戏、加强图形用户界面。2Dcontext
API供应大批图形绘制功效——我但愿经由过程本文你懂得了canvas利用，而且你有乐趣懂得更多！
</p>
HTML5开发的网页文档类型极其简单，就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明.
作者: 仓酷云    时间: 2015-1-17 11:48
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者: 飘飘悠悠    时间: 2015-1-20 18:50
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
作者: 小妖女    时间: 2015-1-29 15:11
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
作者: 莫相离    时间: 2015-2-6 02:31
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。
作者: 简单生活    时间: 2015-2-15 03:51
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
作者: 灵魂腐蚀    时间: 2015-3-4 11:20
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
作者: 再现理想    时间: 2015-3-11 18:51
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
作者: 兰色精灵    时间: 2015-3-19 08:30
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
作者: 冷月葬花魂    时间: 2015-3-27 17:11
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。



欢迎光临 仓酷云 (http://www.ckuyun.com/) Powered by Discuz! X3.2