2023學(xué)年完整公開(kāi)課版Canvas路徑

Canvas路徑繪制路徑方法1.moveTocontext.moveTo(doublex,doubley)將當(dāng)前位置移動(dòng)到坐標(biāo)(x,y)。2.lineTocontext.lineTo(doublex,doubley)從當(dāng)前位置向坐標(biāo)(x,y)畫(huà)一條直線路徑。如果不存在當(dāng)前位置，相當(dāng)于執(zhí)行moveTo(x,y)3.beginPathcontext.beginPath()新開(kāi)始一個(gè)路徑Canvas路徑Canvas筆觸strokecontext.stroke()對(duì)當(dāng)前路徑中的線段或曲線進(jìn)行描邊。描邊的顏色由strokeStyle決定，描邊的粗細(xì)由lineWidth決定。另外與stroke相關(guān)的屬性還有l(wèi)ineJoin、miterLimit等。Canvas路徑屬性功能lineWidthCanvas中繪制路徑的像素寬度.默認(rèn)為1.0strokeStyle指定了對(duì)路徑進(jìn)行描邊時(shí)所用的繪制風(fēng)格lineJoin路徑中相連路徑的交點(diǎn)如何繪制miterLimit當(dāng)lineJoin設(shè)置為miter時(shí)有效，該屬性設(shè)置兩條線段交匯處最大渲染長(zhǎng)度。繪制路徑Canvas路徑varcontext=document.getElementById("canvas").getContext("2d");context.lineWidth=4;context.moveTo(100,10);context.lineTo(100,100);context.stroke();context.strokeStyle="red";context.lineTo(190,100);context.stroke();瀏覽器效果:不同顏色的路徑Canvas路徑varcontext=document.getElementById("canvas").getContext("2d");context.strokeStyle="black";context.lineWidth=4;context.lineCap="square";//設(shè)置端點(diǎn)處的樣式context.beginPath();context.moveTo(100,10);context.lineTo(100,100);context.stroke();context.beginPath();context.moveTo(100,100);context.lineTo(190,100);context.strokeStyle="red";//畫(huà)一條水平紅色線段context.stroke();瀏覽器繪制效果:起止點(diǎn)相連closePathcontext.closePath();當(dāng)路徑中的起始點(diǎn)和終止點(diǎn)不在同一點(diǎn)上時(shí)，執(zhí)行closePath()會(huì)用一條直線將起始點(diǎn)和終止點(diǎn)相連varcontext=document.getElementById("canvas").getContext("2d");context.strokeStyle="black";context.lineWidth=10;context.moveTo(10,10);context.lineTo(100,10);context.lineTo(100,100);context.lineTo(10,100);context.closePath();context.stroke();瀏覽器效果:Canvas路徑弧形路徑Canvas路徑arcTocontext.arcTo(doublepointX1,doublepointY1,doublepointX2,doublepointY2,doubleradius)首先從當(dāng)前位置向(pointX1,pointY1)做條輔助線l1，再?gòu)?pointX1,pointY1)向(pointX2,pointY2)做條輔助線l2，然后以radius為半徑，畫(huà)一條與l1和l2都相切的曲線varcontext=document.getElementById("canvas").getContext("2d");context.strokeStyle="black";context.lineWidth=4