摘要：

• canvas:默認(rèn)寬高為300*150，需用canvas的API定義其寬高
• 繪畫(huà)路徑以beginPath()開(kāi)始,以closePath()結(jié)束
• 常用方法fill()、stroke()、rect()、arc()、text()、lineTo()、moveTo()

以下為代碼： var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

ctx.beginPath(); ctx.lineWidth = 3; ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.lineTo(100,30); ctx.closePath(); ctx.stroke();ctx.beginPath(); ctx.rect(0,130,200,100); ctx.fillStyle="green"; ctx.fill(); ctx.closePath()ctx.beginPath(); var g=ctx.createRadialGradient(300,300,10,400,350,50); g.addColorStop(0,"green"); g.addColorStop(0.5,"blue"); g.addColorStop(1,"red"); ctx.fillStyle=g; ctx.arc(300,300,100,0,2*Math.PI); ctx.stroke(); ctx.fill();ctx.beginPath(); ctx.font="30px Arial"; ctx.strokeText("你好,我是canvas繪畫(huà)字體",300,60);var grd=ctx.createLinearGradient(300,100,500,100); //createLinearGradient(starx,stary,endx,endy) grd.addColorStop(0,"green"); grd.addColorStop(0.5,"blue"); grd.addColorStop(1,"red");ctx.beginPath(); ctx.font="30px Arial"; ctx.fillStyle=grd; ctx.fillText("你好,我是canvas繪畫(huà)字體",300,100); //fillText("文字",起點(diǎn)x,起點(diǎn)y)復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5be8f3cb6fb9a049f069c851

總結(jié)

以上是生活随笔為你收集整理的canvas--初级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。