网格Thegrid
Beforewecanstartdrawing,weneedtotalkaboutthecanvasgridorcoordinatespace.TheHTMLtemplateonthepreviouspagehadacanvaselement150pixelswideand150pixelshigh.I'vedrawnthisimagewiththedefaultgridoverlayed.Normally1unitinthegridcorrespondsto1pixelonthecanvas.Theoriginofthisgridispositionedinthetopleftcorner(coordinate(0,0)).Allelementsareplacedrelativetothisorigin.Sothepositionofthetopleftcornerofthebluesquarebecomesxpixelsfromtheleftandypixelsfromthetop(coordinate(x,y)).Laterinthistutorialwe'llseehowwecantranslatetheorigintoadifferentposition,rotatethegridandevenscaleit.Fornowwe'llsticktothedefault.
在真正开始之前，我们需要先探讨canvas的网格（grid）或者坐标空间（coordinatespace）。在前一页的HTML模板里有一个150像素宽，150像素高的canvas对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应canvas上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x,y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。
绘制图形Drawingshapes
UnlikeSVG,canvasonlysupportsoneprimitiveshape-rectangles.Allothershapesmustbecreatedbycombiningoneormorepaths.Luckily,wehaveacollectionofpathdrawingfunctionswhichmakeitpossibletocomposeverycomplexshapes.
不像SVG，canvas只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。
矩形Rectangles
Firstlet'slookattherectangle.Therearethreefunctionsthatdrawrectanglesonthecanvas:
我们首先看看矩形吧，有三个函数用于绘制矩形的：
fillRect(x,y,width,height):Drawsafilledrectangle
strokeRect(x,y,width,height):Drawsarectangularoutline
clearRect(x,y,width,height):Clearsthespecifiedareaandmakesitfullytransparent
Eachofthesethreefunctionstakesthesameparameters.xandyspecifythepositiononthecanvas(relativetotheorigin)ofthetop-leftcorneroftherectangle.widthandheightareprettyobvious.Let'sseethesefunctionsinaction.
它们都接受四个参数，x和y指定矩形左上角(相对于原点)的位置，width和height是矩形的宽和高。好，实战一下吧。
Belowisthedraw()functionfromthepreviouspage,butnowI'veaddedthethreefunctionsabove.
下面就是上页模板里的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);
}
}
Theresultshouldlooksomethingliketheimageontheright.ThefillRectfunctiondrawsalargeblacksquare100x100pixels.TheclearRectfunctionremovesa60x60pixelssquarefromthecenterandfinallythestrokeRectdrawsarectangularoutline50x50pixelsinsidetheclearedsquare.Inthefollowingpageswe'llseetwoalternativemethodsfortheclearRectfunctionandwe'llalsoseehowtochangethecolorandstrokestyleoftherenderedshapes.
出来的结果应该和右边的是一样的。fillRect函数画了一个大的黑色矩形（100x100），clearRect函数清空了中间60x60大小的方块，然后strokeRect函数又在清空了的空间内勾勒出一个50x50的矩形边框。在接下去的页面里，我们会看到和clearRect函数差不多另外两个方法，以及如何去改变图形的填充和边框颜色。
Unlikethepathfunctionswe'llseeinthenextsection,allthreerectanglefunctionsdrawimmediatelytothecanvas.
与下一节的路径函数不一样，这三个函数的效果会立刻在canvas上反映出来。
绘制路径Drawingpaths
Tomakeshapesusingpaths,weneedacoupleofextrasteps.
不像画矩形那样的直截了当，绘制路径是需要一些额外的步骤的。
beginPath()
closePath()
stroke()
fill()
ThefirststeptocreateapathiscallingthebeginPathmethod.Internally,pathsarestoredasalistofsub-paths(lines,arcs,etc)whichtogetherformashape.Everytimethismethodiscalled,thelistisresetandwecanstartdrawingnewshapes.
第一步是用beginPath创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用beginPath，子路径组都会被重置，然后可以绘制新的图形。
Thesecondstepiscallingthemethodsthatactuallyspecifythepathstobedrawn.We'llseetheseshortly.
第二步就是实际绘制路径的部分，很快我们就会看到。
Thethird,andanoptionalstep,wouldbetocalltheclosePathmethod.Thismethodtriestoclosetheshapebydrawingastraightlinefromthecurrentpointtothestart.Iftheshapehasalreadybeenclosedorthere'sonlyonepointinthelist,thisfunctiondoesnothing.
第三步是调用closePath方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。
Thefinalstepwillbecallingthestrokeand/orfillmethods.Callingoneofthesewillactuallydrawtheshapetothecanvas.strokeisusedtodrawanoutlinedshape,whilefillisusedtopaintasolidshape.
最后一步是调用stroke或fill方法，这时，图形才是实际的绘制到canvas上去。stroke是绘制图形的边框，fill会用填充出一个实心图形。
Note:Whencallingthefillmethodanyopenshapeswillbeclosedautomaticallyanditisn'tnecessarytousetheclosePathmethod.
注意：当调用fill时，开放的路径会自动闭合，而无须调用closePath。
Thecodeforadrawingsimpleshape(atriangle)wouldlooksomethinglikethis.
画一个简单图形（如三角形）的代码如下。
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
moveTo
Oneveryusefulfunction,whichdoesn'tactuallydrawanything,butispartofthepathlistdescribedabove,isthemoveTofunction.Youcanprobablybestthinkofthisasliftingapenorpencilfromonespotonapieceofpaperandplacingitonthenext.
moveTo是一个十分有用的方法，虽然并不能用它来画什么，但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。
moveTo(x,y)
ThemoveTofunctiontakestwoarguments-xandy,-whicharethecoordinatesofthenewstartingpoint.
它接受x和y（新的坐标位置）作为参数。
WhenthecanvasisinitializedorthebeginPathmethodiscalled,thestartingpointissettothecoordinate(0,0).InmostcaseswewouldusethemoveTomethodtoplacethestartingpointsomewhereelse.WecouldalsousethemoveTomethodtodrawunconnectedpaths.Takealookatthesmileyfaceontheright.I'vemarkedtheplaceswhereIusedthemoveTomethod(theredlines).
当canvas初始化或者调用beginPath的时候，起始坐标设置就是原点(0,0)。大多数情况下，我们用moveTo方法将起始坐标移至其它地方，或者用于绘制不连续的路径。看看右边的笑脸，红线就是使用moveTo移动的轨迹。
Totrythisforyourself,youcanusethecodesnippetbelow.Justpasteitintothedrawfunctionwesawearlier.
试一试下面的代码，粘贴到之前用过的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();
Note:removethemoveTomethodstoseetheconnectinglines.
Note:Foradescriptionofthearcfunctionanditsparameterslookbelow.
注意：你可以注释moveTo方法来观察那些连接起来的线。
注意：arc方法的用法见下面。
直线Lines
FordrawingstraightlinesweusethelineTomethod.
我们用lineTo方法来画直线。
lineTo(x,y)
Thismethodtakestwoarguments-xandy,-whicharethecoordinatesoftheline'sendpoint.Thestartingpointisdependentonpreviousdrawnpaths,wheretheendpointofthepreviouspathisthestartingpointforthefollowing,etc.ThestartingpointcanalsobechangedbyusingthemoveTomethod.
lineTo方法接受终点的坐标（x，y）作为参数。起始坐标取决于前一路径，前一路径的终点即当前路径的起点，起始坐标也可以通过moveTo方法来设置。
lineTo的使用示例
Intheexamplebelowtwotrianglesaredrawn,onefilledandoneoutlined.(Theresultcanbeseenintheimageontheright).FirstthebeginPathmethodiscalledtobeginanewshapepath.WethenusethemoveTomethodtomovethestartingpointtothedesiredposition.Belowthistwolinesaredrawnwhichmakeuptwosidesofthetriangle.
示例（如右图）画的是两个三角形，一个实色填充，一个勾边。首先调用beginPath方法创建一个新路径，然后用moveTo方法将起始坐标移至想要的位置，然后画两条直线来构成三角形的两条边。
You'llnoticethedifferencebetweenthefilledandstrokedtriangle.Thisis,asmentionedabove,becauseshapesareautomaticallyclosedwhenapathisfilled.Ifwewouldhavedonethisforthestrokedtriangleonlytwolineswouldhavebeendrawn,notacompletetriangle.
可以注意到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
Fordrawingarcsorcirclesweusethearcmethod.ThespecificationalsodescribesthearcTomethod,whichissupportedbySafaributhasn'tbeenimplementedinthecurrentGeckobrowsers.
我们用arc方法来绘制弧线或圆。标准说明中还包含arcTo方法，当前Safari是支持的，但基于Gecko的浏览器还未实现。
arc(x,y,radius,startAngle,endAngle,anticlockwise)
Thismethodtakesfiveparameters:xandyarethecoordinatesofthecircle'scenter.Radiusisselfexplanatory.ThestartAngleandendAngleparametersdefinethestartandendpointsofthearcinradians.Thestartingandclosinganglearemeasuredfromthexaxis.Theanticlockwiseparameterisabooleanvaluewhichwhentruedrawsthearcanticlockwise,otherwiseinaclockwisedirection.
方法接受五个参数：x，y是圆心坐标，radius是半径，startAngle和endAngle分别是起末弧度（以x轴为基准），anticlockwise为true表示逆时针，反之顺时针。
Warning:IntheFirefoxbetabuilds,thelastparameterisclockwise.Thefinalreleasewillsupportthefunctionasdescribedabove.Allscriptsthatusethismethodinitscurrentformwillneedtobeupdatedoncethefinalversionisreleased.
警告：在Firefox的beta版本里，最后一个参数是clockwise，而最终版本不是。因此如果是从beta升级至发行版需要做相应修改。
Note:Anglesinthearcfunctionaremeasuredinradians,notdegrees.ToconvertdegreestoradiansyoucanusethefollowingJavaScriptexpression:varradians=(Math.PI/180)*degrees.
注意：arc方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：varradians=(Math.PI/180)*degrees;。
arc的使用示例
Thefollowingexampleisalittlemorecomplexthantheoneswe'veseenabove.I'vedrawn12differentarcsallwithdifferentanglesandfills.IfIwouldhavewrittenthisexamplejustlikethesmileyfaceabove,firstlythiswouldhavebecomeaverylonglistofstatementsandsecondly,whendrawingarcs,Iwouldneedtoknoweverysinglestartingpoint.Forarcsof90,180and270degrees,liketheonesIusedhere,thiswouldn'tbetomuchofaproblem,butformorecomplexonesthisbecomeswaytoodifficult.
这个示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。像这里画90，180和270度的弧形同样是一个问题，如果图形越繁杂实现起来会越困难。
Thetwoforloopsareforloopingthroughtherowsandcolumnsofarcs.ForeveryarcIstartanewpathusingbeginPath.BelowthisI'vewrittenoutalltheparametersasvariables,soit'seasiertoreadwhat'sgoingon.Normallythiswouldbejustonestatement.Thexandycoordinatesshouldbeclearenough.radiusandstartAnglearefixed.TheendAnglestartsofas180degrees(firstcolumn)andisincreasedwithstepsof90degreestoformacompletecircle(lastcolumn).Thestatementfortheclockwiseparameterresultsinthefirstandthirdrowbeingdrawnasclockwisearcsandthesecondandfourthrowascounterclockwisearcs.Finally,theifstatementmakesthetophalfstrokedarcsandthebottomhalffilledarcs.
这里使用两个for循环来画多行多列的弧形。每一个弧形都用beginPath方法创建一个新路径。然后为了方便阅读和理解，我把所有参数都写成变量形式。显而易见，x和y作为圆心坐标。radius和startAngle都是固定，endAngle从180度半圆开始，以90度方式递增至圆。anticlockwise则取决于奇偶行数。最后，通过if语句判断使前两行表现为勾边，而后两行为填充效果。
for(i=0;i<4;i++){
for(j=0;j<3;j++){
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();
}
}
}
贝塞尔和二次方曲线Bezierandquadraticcurves
ThenexttypeofpathsavailableareBéziercurves,availableinthecubicandquadraticvarieties.Thesearegenerallyusedtodrawcomplexorganicshapes.
接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。
quadraticCurveTo(cp1x,cp1y,x,y)//BROKENinFirefox1.5(seeworkaroundbelow)
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
Thedifferencebetweenthesecanbestbedescribedusingtheimageontheright.AquadraticBéziercurvehasastartandanendpoint(bluedots)andjustonecontrolpoint(reddot)whileacubicBéziercurveusestwocontrolpoints.
上面两行代码的区别见右图。它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。
Thexandyparametersinboththesemethodsarethecoordinatesoftheendpoint.cp1xandcp1yarethecoordinatesofthefirstcontrolpoint,andcp2xandcp2yarethecoordinatesofthesecondcontrolpoint.
参数x和y是终点坐标，cp1x和cp1y是第一个控制点的坐标，cp2x和cp2y是第二个的。
UsingquadraticandcubicBéziercurvescanbequitechallenging,becauseunlikevectordrawingsoftwarelikeAdobeIllustrator,wedon'thavedirectvisualfeedbackastowhatwe'redoing.Thismakesitprettyhardtodrawcomplexshapes.Inthefollowingexample,we'llbedrawingsomesimpleorganicshapes,butifyouhavethetimeand,mostofall,thepatience,muchmorecomplexshapescanbecreated.
使用二次方和三次方的贝塞尔曲线是相当有挑战的，因为不像在矢量绘图软件AdobeIllustrator里那样有即时的视觉反馈。因为用它来画复杂图形是比较麻烦的。但如果你有时间，并且最重要是有耐心，再复杂的图形都可以绘制出来的。下面我们来画一个简单而又规律的图形。
There'snothingverydifficultintheseexamples.Inbothcasesweseeasuccessionofcurvesbeingdrawnwhichfinallyresultinacompleteshape.
这些例子都比较简单。我们绘制的都是完整的图形。
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();
ItispossibletoconvertanyquadraticBéziercurvetoacubicBéziercurvebycorrectlycomputingbothcubicBéziercontrolpointsfromthesinglequadraticBéziercontrolpoint,althoughthereverseisNOTtrue.AnexactconversionofacubicBéziercurvetoaquadraticBéziercurveisonlypossibleifthecubictermiszero,morecommonlyasubdivisionmethodisusedtoapproximateacubicBézierusingmultiplequadraticBéziercurves.
通过计算，可以由二次曲线的单个控制点得出相应三次方曲线的两个控制点，因此二次方转三次方是可能的，但是反之不然。仅当三次方程中的三次项为零是才可能转换为二次的贝塞尔曲线。通常地可以用多条二次方曲线通过细分算法来近似模拟三次方贝塞尔曲线。
bezierCurveTo的使用示例
//Beziercurvesexample
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
Firefox1.5quadraticCurveTo()bug的应对方案
ThereisabugintheFirefox1.5implementationofquadatricCurveTo().ItdoesNOTdrawaquadraticcurve,asitisjustcallingthesamecubiccurvefunctionbezierCurveTo()calls,andrepeatingthesinglequadraticcontrolpoint(x,y)coordinatetwice.ForthisreasonquadraticCurveTo()willyieldincorrectresults.IfyourequiretheuseofquadraticCurveTo()youmustconvertyourquadraticBéziercurvetoacubicBéziercurveyourself,soyoucanusetheworkingbezierCurveTo()method.
在Firefox1.5里，quadatricCurveTo()的实现是有bug的，它不是直接绘制二次方曲线，而是调用bezierCurveTo()，其中两个控制点都是二次方曲线的那个单控制点。因此，它会绘制出不正确的曲线。如果必须使用到quadraticCurveTo()，你需要自行去将二次方曲线转换成三次方的，这样就可以用bezierCurveTo()方法了。
varcurrentX,currentY;//settolastx,ysenttolineTo/moveTo/bezierCurveToorquadraticCurveToFixed()
functionquadraticCurveToFixed(cpx,cpy,x,y){
/*
Fortheequationsbelowthefollowingvariablenameprefixesareused:
qp0isthequadraticcurvestartingpoint(youmustkeepthisfromyourlastpointsenttomoveTo(),lineTo(),orbezierCurveTo()).
qp1isthequadatriccurvecontrolpoint(thisisthecpx,cpyyouwouldhavesenttoquadraticCurveTo()).
qp2isthequadraticcurveendingpoint(thisisthex,yargumentsyouwouldhavesenttoquadraticCurveTo()).
Wewillconvertthesepointstocomputethetwoneededcubiccontrolpoints(thestarting/endingpointsarethesameforboth
thequadraticandcubiccurves.
Theequationsforthetwocubiccontrolpointsare:
cp0=qp0andcp3=qp2
cp1=qp0+2/3*(qp1-qp0)
cp2=cp1+1/3*(qp2-qp0)
Inthecodebelow,wemustcomputeboththexandytermsforeachpointseparately.
cp1x=qp0x+2.0/3.0*(qp1x-qp0x);
cp1y=qp0y+2.0/3.0*(qp1y-qp0y);
cp2x=cp1x+(qp2x-qp0x)/3.0;
cp2y=cp1y+(qp2y-qp0y)/3.0;
Wewillnow
a)replacetheqp0xandqp0yvariableswithcurrentXandcurrentY(which*you*muststoreforeachmoveTo/lineTo/bezierCurveTo)
b)replacetheqp1xandqp1yvariableswithcpxandcpy(whichwewouldhavepassedtoquadraticCurveTo)
c)replacetheqp2xandqp2yvariableswithxandy.
whichleavesuswith:
*/
varcp1x=currentX+2.0/3.0*(cpx-currentX);
varcp1y=currentY+2.0/3.0*(cpy-currentY);
varcp2x=cp1x+(x-currentX)/3.0;
varcp2y=cp1y+(y-currentY)/3.0;
//andnowcallcubicBeziercurvetofunction
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
currentX=x;
currentY=y;
}
又是矩形Rectangles
Besidesthethreemethodswesawabovewhichdrawrectangularshapesdirectlytothecanvas,wealsohaveamethodrectwhichaddsarectangularpathtothepathlist.
除了上面提到的三个方法可以直接绘制矩形之外，我们还有一个rect方法是用于绘制矩形路径的。
rect(x,y,width,height)
Thismethodtakesfourarguments.Thexandyparametersdefinethecoordinateofthetopleftcornerofthenewrectangularpath.widthandheightdefinethewidthandtheheightoftherectangle.
它接受四个参数，x和y是其左上角坐标，width和height是其宽和高。
Whenthismethodisexecuted,themoveTomethodisautomaticallycalledwiththeparameters(0,0)(i.e.itresetsthestartingpointtoitsdefaultlocation).
当它被调用时，moveTo方法会自动被调用，于是起始坐标又恢复成原点了。
大杂烩Makingcombinations
InallexamplesonthispageI'veonlyusedonetypeofpathfunctionpershape.Howeverthere'sabsolutelynolimitationtotheamountortypeofpathsyoucanusetocreateashape.SointhislastexampleI'vetriedtocombineallofthepathfunctionstomakeasetofveryfamousgamecharacters.
上面所用到的例子都只用到了一种类型的路径，当然canvas不会限制所使用的路径类型的多少。所以，我们来看一个路径大杂烩。
大杂烩样例
I'mnotgoingtorunthroughthiscompletescript,butthemostimportantthingstonotearethefunctionroundedRectandtheuseofthefillStyleproperty.Itcanbeveryusefullandtimesavingtodefineyourownfunctionstodrawmorecomplexshapes.InthisscriptitwouldhavetakenmetwiceasmanylinesofcodeasIhavenow.
WewilllookatthefillStylepropertyingreaterdepthlaterinthistutorial.HereI'musingittochangethefillcolorfromthedefaultblack,towhite,andbackagain.
在整个例子里，最值得注意的是roundedRect函数的使用和fillStyle属性的设置。自定义函数对于封装复杂图形的绘制是非常有用的。在这个例子里使用自定义函数就省掉了大约一半的代码。
在接下来的例子里会深入探讨fillStyle属性的使用。这里是用它来改变填充颜色，从默认的黑色，到白色，然后再回到黑色。
查看示例
functiondraw(){
varctx=document.getElementById('canvas').getContext('2d');
roundedRect(ctx,12,12,150,150,15);
roundedRect(ctx,19,19,150,150,9);
roundedRect(ctx,53,53,49,33,10);
roundedRect(ctx,53,119,49,16,6);
roundedRect(ctx,135,53,49,33,10);
roundedRect(ctx,135,119,25,49,10);
ctx.beginPath();
ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,true);
ctx.lineTo(31,37);
ctx.fill();
for(i=0;i<8;i++){
ctx.fillRect(51+i*16,35,4,4);
}
for(i=0;i<6;i++){
ctx.fillRect(115,51+i*16,4,4);
}
for(i=0;i<8;i++){
ctx.fillRect(51+i*16,99,4,4);
}
ctx.beginPath();
ctx.moveTo(83,116);
ctx.lineTo(83,102);
ctx.bezierCurveTo(83,94,89,88,97,88);
ctx.bezierCurveTo(105,88,111,94,111,102);
ctx.lineTo(111,116);
ctx.lineTo(106.333,111.333);
ctx.lineTo(101.666,116);
ctx.lineTo(97,111.333);
ctx.lineTo(92.333,116);
ctx.lineTo(87.666,111.333);
ctx.lineTo(83,116);
ctx.fill();
ctx.fillStyle="white";
ctx.beginPath();
ctx.moveTo(91,96);
ctx.bezierCurveTo(88,96,87,99,87,101);
ctx.bezierCurveTo(87,103,88,106,91,106);
ctx.bezierCurveTo(94,106,95,103,95,101);
ctx.bezierCurveTo(95,99,94,96,91,96);
ctx.moveTo(103,96);
ctx.bezierCurveTo(100,96,99,99,99,101);
ctx.bezierCurveTo(99,103,100,106,103,106);
ctx.bezierCurveTo(106,106,107,103,107,101);
ctx.bezierCurveTo(107,99,106,96,103,96);
ctx.fill();
ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(101,102,2,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(89,102,2,0,Math.PI*2,true);
ctx.fill();
}
functionroundedRect(ctx,x,y,width,height,radius){
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.stroke();
}
点这里查看更多HTML教程
相关文章
精彩导读
热门资讯
关注我们
