<head>
<title></title>
</head>
<body>
<canvas id="can1" width="500px" height="400px" style="border:solid 1px red">
</canvas>
<script type="text/javascript">
//1.得到畫布
var canvas1 = document.getElementById_x("can1");
//2.得到畫筆
var cxt = canvas1.getContext("2d");
//3.畫直線
//moveTo函數就是設定點的位置
cxt.moveTo(20, 20);
//設定第二個點的位置
cxt.lineTo(20, 90);
//畫出直線
cxt.stroke();
//畫出一個填充三角形
//開始新的路徑
cxt.beginPath();
cxt.moveTo(40, 20);
cxt.lineTo(40, 90);
cxt.lineTo(80, 90);
//閉合路徑，把最後這個點和第一個點moveTo()閉合
cxt.closePath();
//填充矩形
//cxt.fill();
//空心矩形
cxt.strokeRect(100, 20, 70, 70);
//如果希望改變填充的顔色，剛修改畫筆的fillStyle
cxt.fillStyle = "#00FF00";
cxt.fillRect(190,20,50,50);
//畫出圓形 car
//六個參數:arc(x,y,radius,startAngle,endAngle,counterclockwise)
cxt.arc(270, 40, 20, 0, 360, true);//(x,y,r,開始角度，結束角度，是否順時針)
//填充空心的圓形
//畫筆換色
cxt.fillStyle = "FF0000";
cxt.arc(320, 40, 20, 0, 360, true); //(x,y,r,開始角度，結束角度，是否順時針)
//填充實心的圓形
cxt.fill();
//畫圖檔
//1.建立image對象
var img1 = new Image();
//2.指定是哪個圖檔
img1.src = "薩摩耶.jpg";
//注意要加這麼一個方法，先加載完成後再畫圖
img1.onload = function () {
cxt.drawImage(img1, 20, 100, 200, 150);
}
//在畫布上寫字
var text = "Hello，親愛哒！";
//設定字型的大小
cxt.fillStyle = "#0000FF";
cxt.font = "30px 華文彩雲";
cxt.fillText(text,230,200);
</script>
</body>
</html>
本文轉自蓬萊仙羽51CTO部落格，原文連結：http://blog.51cto.com/dingxiaowei/1366604，如需轉載請自行聯系原作者
![第一個APP——GeoQuiz[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)