第五講繪制畫(huà)布

Canvas對(duì)象你的畫(huà)布內(nèi)容繪制圖形概說(shuō)繪制點(diǎn)和線陰影和填充漸變色路徑幾何圖形第一例繪制第一個(gè)圖形填充內(nèi)容<canvaswidth="1200"height="800">alternativecontentforbrowserswithoutcanvassupport</canvas><script>varcanvas=document.querySelector("canvas");varcontext=canvas.getContext('2d');context.fillStyle='red';context.fillRect(0,0,800,600);context.fillStyle='rgba(255,255,0,0.5)';context.fillRect(400,200,800,600);</script>Rectangles繪制矩形對(duì)象context.fillRect(x,y,w,h)context.strokeRect(x,y,w,h)context.clearRect(x,y,w,h)Colors指定顏色（紅色）

指定方法顏色值Hexadecimal#FF0000Hexadecimal(short)#F00RGBrgb(255,0,0)RGB(percent)rgb(100%,0%,0%)RGBArgba(255,0,0,1.0)RGBA(percent)rgba(100%,0%,0%,1.0)HSLhsl(0,100%,50%)HSLAhsla(0,100%,50%,1.0)SVG(namedcolor)redshadowcontext.shadowOffsetX=2.0;context.shadowOffsetY=2.0;context.shadowColor="rgba(50%,50%,50%,0.75)";context.shadowBlur=2.0;Gradients漸變色線性漸變中心區(qū)域漸變線性漸變起始位置截至位置漸變中節(jié)點(diǎn)應(yīng)用到圖形上varlinGrad=context.createLinearGradient(0,450,1000,450);linGrad.addColorStop(0.0,'red');linGrad.addColorStop(0.5,'yellow');linGrad.addColorStop(0.7,'orange');linGrad.addColorStop(1.0,'purple');context.fillStyle=linGrad;context.fillRect(0,450,1000,450);中心區(qū)域漸變定義漸變區(qū)域定義節(jié)點(diǎn)定義填充對(duì)象varradGrad=context.createRadialGradient(260,320,40,200,400,200);radGrad.addColorStop(0.0,'yellow');radGrad.addColorStop(0.9,'orange');radGrad.addColorStop(1.0,'rgba(0,0,0,0)');context.fillStyle=radGrad;context.fillRect(0,200,400,400);Paths像手繪的過(guò)程繪制過(guò)程開(kāi)始繪制beginPath()定義所有節(jié)點(diǎn)用stroke實(shí)現(xiàn)繪制context.beginPath();context.moveTo(300,700);context.lineTo(600,100);context.lineTo(900,700);context.moveTo(350,400);context.lineTo(850,400);context.stroke();lines繪制直線context.lineTo(x,y)貝塞爾曲線兩種曲線拋物線context.quadraticCurveTo(cpx,cpy,x,y)貝塞爾曲線貝塞爾曲線context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)Arcs定義自定義曲線context.arcTo(x1,y1,x2,y2,radius)圓角圖形弧的靈活應(yīng)用varroundedRect=function(x,y,w,h,r){context.beginPath();context.moveTo(x,y+r);context.arcTo(x,y,x+w,y,r);context.arcTo(x+w,y,x+w,y+h,r);context.arcTo(x+w,y+h,x,y+h,r);context.arcTo(x,y+h,x,y,r);context.closePath();context.stroke();};roundedRect(100,100,700,500,60);roundedRect(900,150,160,160,80);roundedRect(700,400,400,300,40);roundedRect(150,650,400,80,10);弧的第二種形勢(shì)以弧度坐標(biāo)標(biāo)定義?。▍^(qū)分于平面坐標(biāo))context.arc(x,y,radius,startAngle,endAngle,anticlockwise)弧度坐標(biāo)與角度坐標(biāo)的換算弧度坐標(biāo)與角度換算繪制一個(gè)圓繪制一個(gè)扇形vardeg2rad=function(deg){returndeg*(Math.PI/180.0);};varcircle=function(cx,cy,r){context.moveTo(cx+r,cy);context.arc(cx,cy,r,0,Math.PI*2.0,0);};varsector=function(cx,cy,r,startAngle,endAngle,anticlockwise){context.moveTo(cx,cy);context.arc(cx,cy,r,startAngle*(Math.PI/180.0),endAngle*(Math.PI/180.0),anticlockwise);context.closePath();};Democircle_sectorRect矩形對(duì)象context.rect(x,y,w,h)Outlines,Fills,andClippingMasks樣式由strokeStyle決定lineWidth以像素為單位定義寬度linecap定義邊界樣式linejoin定義連接context.lineWidth=[Pixel]context.lineCap=[*butt,round,square]context.lineJoin=[bevel,round,*miter]填充邊界Demoline_styles.html.htmnon-zero總