创建 canvas 的方法很简单.docx
1、创建canvas的方法很简洁，只需要在HTML页面中添加canvas元素：123canvasid=myCanvaswidth=300height=150Fallbackcontent,incasethebrows erdoesnotsupportCanvas./canvas为了能在JavaScript中引用元素，最好给元素设置ID；也需要给canvas设定高度和宽度。创建好了画布后，让我们来预备画笔。要在画布中绘制图形需要使用JavaScript。首先通过getElementById函数到canvas元素
2、，然后初始化上下文。之后可以使用上下文API绘制各种图形。下面的脚本在canvas中绘制一个矩形(点击此处查看效果)：12345678910111213141516//Getareferencetotheelement.varelem=document.g etElementById(myCanvas);//Alwayscheckforproperties和
methods,tomakesureyourcodedoesntbreak//inotherbrowsers.if(elemamp;amp ;elem.g
3、
etContext){//Getthe2dcontext.//Remember:youcanonlyinitializeonecontex tperelement.Context(2d);if(context){//Youaredone!N owyoucandrawyourfirstrectangle.//Youonlyneedtoprovidethe(x,y)coordina tes,followedbythewidthand//
4、ext.fillRect(0,0,150,100);}}可以把上面代码放置在文档head部分中，或者放在外部文件中。2DcontextAPI介绍了如何创建canvas后，让我们来看看2DcanvasAPI，看看能用这些函数做些什么。基本线条上面的例子中展示了绘制矩形是多么简洁。通过fillStyle和strokeStyle属性可以轻松的设置矩形的填充和线条。颜值使用方法和CSS一样：十六进制数、rgb()、rgba()和hsla()〔若浏览器支持，如Opera10和Firefox3)。通过fillRec
5、t可以绘制带填充的矩形。使用strokeRect可以绘制只有边框没有填充的矩形。假如想去除部分canvas可以使用clearRect。上述三个方法的参数相同：x,y,width,height。前两个参数设定(x,y)坐标，后两个参数设置矩形的高度和宽度。可以使用lineWidth属性转变线条粗细。让我们看看使用了
fillRect,strokeRectclearRect和其他的例子：
123456789context.fillStyle=#00f;//bluecontext.strokeStyle=#f00;
6、
//redcontext.lineWidth=4;//t.fillRect(0,0,15 0,50);context.strokeRect(0,60,150,50);context.clearRect(30,25,90,60); context.strokeRect(30,25,90,60)；此例子效果图见图1.图
1:fillRect,strokeRect和clearRect效果图路径通过canvas路径〔path〕可以绘制任意样子。可以先绘制轮廓，然后绘制边
7、框和填充。创建自定义样子很简洁，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用fill和stroke即可添加填充或者设置边框。调用closePath()结束自定义图形绘制。下面是一个绘制三角形的例子：
1234567891011121314151617//t.fillStyle=#0 0f;context.strokeStyle=#f00;context.lineWidth=4;context.beginPa
8、
th();//veTo(10,10);//givethe(x,y)
svg和canvas的区别coordinatescontext.lineTo(100,10);context.lineTo(10,100);context.line To(10,10);//Done!Nowfilltheshape，和
drawthestroke.//Note:
9、t.fill();context.stroke();context.closePath()；其效果图见图2.图2：三角形另一个较负责的例子中使
用了直线、曲线和圆弧。插入图像drawImage 方法允许在canvas中插入其他图像(img和canvas元素)。在Opera中可以再canvas中绘制SVG图形。此方法比较冗杂，可以有3个、5个或9个参数：3个参数：最基本的drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在canvas中的位置。5个参数：中级的drawImage使用方法，包括上
10、面所述3个参数，加两个参数指明插入图像宽度和高度(假如你想转变图像大小)。9个参数：最冗杂drawImage杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。下面是上述三个使用方法的例子：
1234567891011//Threearguments:theelement,destination(x,y)coordinates. context.drawImage(img_elem,dx,dy);//Fivearguments:theelemen
11、
t,destination(x,y)coordinates,anddestination//widthandheight(ifyouwan ttoresizethesourceimage).context.drawImage(img_elem,dx,dy,dw,dh);//Ni nearguments:theelement,source(x,y)coordinates,sourcewidthand//height( forcropping),destination(x,y)coordinates,anddest
12、inationwidth//andheight(resize).context.drawImage(img_elem,sx,sy,sw,s h,dx,dy,dw,dh)；其效果见图3.图3:drawImage效果图。像素级操作
2DContextAPI提供了三个方法用于像素级操作：createImageData,getImageData，和putImageData。ImageData对象保存了图像像素值。每个对象有三个属
性:width,height和data。data属性类型为CanvasPixelArray
13、，用于储存width*height*4个像素值。每一个像素有RGB值和透亮度alpha值(其值为0至255，包括alpha在内!)。像素的顺序从左至右，从上到下，按行存储。为了更好的理解其原理，让我们来看一个例子——绘制红矩形123456789101112//CreateanImageDataobject.ateImageD ata(50,50);varpix=imgd.data;//Loopovereachpixel和
setatransparentred.for(v
14、
ari=0;n=pix.length,ilt;n;i+=4){pix[i]=255;//redchannelpix[i+3]=127;// alphachannel}//DrawtheImageDataobjectatthegiven(x, xt.putImageData(imgd,0,0)
；留意：不是全部浏览器都实现了createImageData。在支持的浏览器中，需要通过getImageData方法获取ImageData对象。请参考示例代码。通过ImageData可
15、以完成许多功能。如可以实现图像滤镜，或可以实现数学可视化(如分形和其他特效)。下面特效实现了简洁的颜反转滤镜：1234567891011121314//GettheCanvasPixelArrayfromthegivencoordinatesand dimensions.ImageData(varx/var,vary/var,varwidth/va r,varheight/var);varpix=imgd.data;//Loopovereachpixelandinver
16、
tthecolor.for(vari=0,n=pix.length;ilt;n;i+=4){pix[i]=255-pix[i];//red pix[i+1]=255-pix[i+1];//greenpix[i+2]=255-pix[i+2];//blue//i+3isalpha (thefourthelement)}//DrawtheImageDataatthegiven(x, xt.putImageData(imgd,varx/var,vary/var)；图4显示了使用此
17、滤镜后的Opera图像(图3是原图)。图4：颜反转滤镜文字虽然最近的WebKit版本和Firefox3.1nightlybuild才开始支持TextAPI，为了保证文章完好性我确定仍在这里介绍文字API。context对象可以设置以下text属性：font：文字字体，同CSSfont-family属性textAlign：文字水平对齐
方式。可取属性值:start,end,left,right,center。默认值:Baseline：文字竖直对齐方式。可取属性值：top,hanging,
18、middle,alphabetic,ideographic,bottom。默认值：alphabetic.有两个方法可以绘制文字：fillText和strokeText。第一个绘制带fillStyle填充的文字，后者绘制只有strokeStyle边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y)坐标。还有一个可选选项——最大宽度。假如需要的话，浏览器会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的(x,y)坐标的相对位置。下面是一个在canvas中绘制”helloworld”文字的例子
19、
123456context.fillStyle=#00f;context.font=italic30pxsans-serif;Baseline=top;context.fillText(Helloworld!,0,0);context.font=bol d30pxsans-serif;context.strokeText(Helloworld!,0,50)；图5是其效果图。图5：文字效果阴影目前只有Konqueror和Firefox3.1nightlybuild支持ShadowsAP
20、I。API的属性为：shadowColor：阴影颜。其值和CSS颜值一致。shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和Photoshop 的高斯模糊滤镜相同。shadowOffsetX和shadowOffsetY：阴影的x和y偏移量，单位是像素。下面是canvas阴影的例子：
123456context.shadowOffsetX=5;context.shadowOffsetY=5;context.shadowB lur=4;context.shadowColor=rgba(255
21、,0,0,0.5);context.fillStyle=#00f;context.fillRect(20,20,150,100)；其效果见图6。图6:canvas阴影效果——蓝矩形，红阴影颜渐变除了CSS 颜，fillStyle和strokeStyle属性可以设置为CanvasGradient对象。——通过CanvasGradient可以为线条和填充使用颜渐变。欲创建CanvasGradient对象，可以使用两个方法：createLinearGradient和createRadialGradien
22、t。前者创建线性颜渐变，后者创建圆形颜渐变。创建颜渐变对象后，可以使用对象的addColorStop方法添加颜中间值。下面的代码演示了颜渐变使用方法：
1234567891011121314151617181920//Youneedtoprovidethesource和destination(x,y)coordinates//forthegradient(fromwhereitstarts和whereitends).ateLinearGradient
23、
(varsx/var,varsy/var,vardx/var,vardy/var);//Nowyoucanaddcolorsinyourg radient.//Thefirstargumenttellsthepositionforthecolorinyourgradient.T
he//acceptedvaluerangeisfrom0(gradientstart)to1(gradientend).//Thesec ondargumenttellsthecoloryouwant,usingtheCSScolor
24、
destinationcircleradius.//The(x,y)coordinatesdefinethecirclecenterpoi nts(start和//de
25、
stination).ateRadialGradient(varsx/var,varsy/ var,varsr/var,vardx/var,vardy/var,vardr/var);//Addingcolorstoaradialg radientisthesameasaddingcolorstolinear//gradients.我也预备了一个更冗杂的例子，使用了线性颜渐变、阴影和文字。其效果见图7。图7：使用线性颜渐变的例子canvas演示假如你想知道使用
26、Canvas可以做些什么，可以参看以下的工程：OperaWidget：oSimAquariumoArtist’sSketc hbookoSpirograph在线工程和演示oNewtonpolynomialoCanvascape–“3DWalker”oPaint.Web–
paintingdemo,open-sourceoStar-fieldflightoInteractiveblob小节Canvas 是HTML5最让人期盼的特性之一，目前已获得大部分Web浏览器支持。Canvas 可以关心创建游戏、增添图形用户界
27、面。2DcontextAPI提供大量图形绘制功能——我盼望通过本文你了解了canvas使用，并且你有兴趣了解更多！本文转自：operachina本文翻译自HTML5canvas–thebasicsMihaiSucan相关日志应用图像UsingimagesOneofthemorefunfeaturesofthecanvasistheabillitytouseimages .Thesecanbeusedtododynamicphotocompositingorusedasbackdropsofgraphse      28、
tc.Itscurrentlyalsotheonlywaytoaddtexttothem(Thespecificationdoesnotc ontainanyfunctionstodrawtext).Externalimagescanbeusedinanyformatsuppo PNG,GIForJPEGformat).Othercanvaselementsonthesamepage canalsobeusedasthesource.Canvas相当好玩的一项功能就是可以引入图像
29、，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字〔标准说明中并没有包含绘制文字的功能〕。只要是Gecko支持的图像〔如PNG，GIF，JPEG等〕都可以引入到canvas中，而且其它的canvas元素也可以作为图像的来源。引入图像ImportingimagesImportingimagesisbasicallyatwostepprocess：引入图像只需要简洁的两步：FirstlyweneedareferencetoaJavaScriptImageobjectorothercanvasel
30、
ementasasource.ItisntpossibletouseimagesbysimplyprovidingaURL/pathtot hem.SecondlywedrawtheimageonthecanvasusingthedrawImagefunction.第一当然是来源图片，不是简洁的URL路径，但可以是一个JavaScript的Image对象引用，又或者其它的canvas元素。然后用drawImage方法将图像插入到canvas 中。Letslookatsteponefirst.Thereareb
31、asicallyfouroptionsavailable：先来看看第一步，基本上有四种可选
方式：引用页面内的图片UsingimageswhichareonthesamepageWecanaccessallimagesonapagebyusingeit herthedocument.ElementsByTagNamemetho d,ElementBy
32、Idmethod.我们可以通过document.images集合、
33、
34、ondcanvaselementasathumbnailviewoftheotherlargercanvas.一个常用的应用就是为另一个大的canvas做缩略图。由零开始创建图像CreatinganimagefromscratchAnotheroptionistocreatenewImageobjectsinour script.Themaindisadvantageofthisapproachisthatifwedontwantourscriptto haltinthemiddlebecauseitneed
35、stowaitforanimagetoload,weneedsomeformofimagepreloading.另外，我们可以用脚本创建一个新的Image对象，但这种方法的主要缺点是假如不盼望脚本因为等待图片装置而暂停，还得需要突破预装载。Basicallytocreateanewimageobjectwedothis：我们可以通过下面简洁的方法来创建图片：
1.varimg=newImage();//CreatenewImageobject
2.img.src=myImage.png;//Set source
36、
pathvarimg=newImage();//CreatenewImageobjectimg.src=myImage.png;//Set sourcepathWhenthisscriptgetsexecuted,theimagestartsloading.Ifloadingi sntfinishedwhenadrawImagestatementgetsexecuted,thescripthaltsuntilthe imageisfinishedloading.Ifyoudontwantthistohappen
37、,useanonloadeventhandler：当脚本执行后，图片开始装载。若调用drawImage时，图片没装载完，脚本会等待直至装载完毕。假如不盼望这样，可以使用onload事件：
1.varimg=newImage();//CreatenewImageobject
load=function(){
3./ /executedrawImagestatementshere
4.}
5.img.src=myImage.png;//Setsourcepa thvarimg=newImage();//Cr
38、
39、

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。