<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas style="border: 1px solid red" width="400px" height="400px" id="can1"> </canvas> <script type="text/javascript"> //1得到畫布 var canvas1 = document.getElementById("can1"); //2得到上下文引用 畫筆 var cxt = canvas1.getContext("2d") //3畫出直線 cxt.moveTo(20,20); cxt.lineTo(20,90); //畫出直線 cxt.stroke(); /****畫出一個填充的三角形--->路徑****/ //開始新路徑 cxt.beginPath(); cxt.moveTo(40,20); cxt.lineTo(40,90); cxt.lineTo(80,90); //閉合路徑 畫了三個點 閉合起來 連起來 cxt.closePath(); cxt.fill();//實心的 //cxt.stroke();//空心的 /**畫出矩形**/ cxt.strokeRect(100,20,70,70);//空心矩形 //改變畫筆的style cxt.fillStyle="red"; cxt.fillRect(200,20,70,70);//實心的矩形 /**畫出圓形**/ cxt.fillStyle="blue" cxt.beginPath(); cxt.arc(270,40,20,0,360,true); cxt.closePath(); // cxt.stroke(); cxt.fill(); /**畫出圖片**/ //1創建image對象 var img1 = new Image(); img1.src="apple-touch-icon-precomposed.png"; //加載完畢後再繪製圖形 img1.onload=function(){ cxt.drawImage(img1,20,100,200,150); } </script> </body> </html>
