基本框架
<body> <canvas id="myCanvas" width="200" height="100"></canvas> //看樣子這里默認是用px做單位 </body>
<script> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); //這是內置的2d對象 </script>
案例
繪制一個矩形
cxt.fillRect(x,y,width,height); cxt.fillStyle = color;
繪制一條路徑
cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();
繪制一個圓
cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill();
填充漸變
var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);
填充圖像
var img=new Image() img.src="flower.png" cxt.drawImage(img,0,0);
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
