先說一下canvas元素比較游泳的方法主要是canvas通過getContext()方法獲取的上下文對象。
其次設置顏色方面，通常有四種方法：16進制顏色值、英語單詞、rgb、rgba。主要注意的是後兩者，rgb的三個參數是紅綠藍0-255的值，rgba在此基礎上添加了第四個參數透明度，范圍0-1。
1.畫矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script>
//畫矩形
function drawRect(id){
var canvas = document.getElementById(id); //獲取上下文對象，canvas很多常用方法都是基於這個對象實現的
var context = canvas.getContext('2d'); //目前參數只有2d
context.fillStyle = "gray"; //填充顏色
context.strokeStyle = "#f60"; //邊框顏色
context.lineWidth = 5; //邊框寬度
context.fillRect(0,0,400,300); //參數：x,y,width,height。繪制“已填色”的矩形,默認填充顏色是黑色
context.strokeRect(80,80,180,120); //參數：x,y,width,height。繪制未填色的矩形,默認填充顏色是黑色
context.strokeRect(110,110,180,120);
}
</script>
<head>
<body onload="drawRect('canvas');">
<canvas id="canvas" width="400px" height="400px" ></canvas>
</body>
</html>
JavaScript已經是所有浏覽器的默認腳本語言，因此<script>標簽中無需再指定腳本類型。
2.畫圓
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script>
//畫圓形
function drawArc(id){
var canvas = document.getElementById(id); //獲取上下文對象，canvas很多常用方法都是基於這個對象實現的
var context = canvas.getContext('2d'); //目前參數只有2d
context.fillStyle = "#f1f2f3"; //填充顏色
context.fillRect(0,0,400,400); //參數：x,y,width,height。繪制“已填色”的矩形,默認填充顏色是黑色
for(var i=1; i<10; i++){
context.beginPath(); //路徑開始
i % 2 ? context.arc(200,200,10*i,0,Math.PI,true): context.arc(200,200,10*i,0,Math.PI,false); //參數：x,y,半徑,開始角度,結束角度,是否按順時針方向
context.closePath(); //路徑關閉
context.fillStyle = "rgba(255,0,0,0.25)"; //填充顏色
context.fill(); //繪制
}
}
</script>
<head>
<body onload="drawArc('canvas');">
<canvas id="canvas" width="400px" height="400px" ></canvas>
</body>
</html>
3.寫字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script>
//寫字
function drawText(id){
var canvas = document.getElementById(id); //獲取上下文對象，canvas很多常用方法都是基於這個對象實現的
var context = canvas.getContext('2d'); //目前參數只有2d
context.fillStyle = "gray"; //填充顏色
context.fillRect(0,0,800,300); //參數：x,y,width,height。繪制“已填色”的矩形,默認填充顏色是黑色
context.fillStyle = '#fff'; //填充顏色
context.strokeStyle = '#fff'; //邊框顏色
context.font = "bold 40px '微軟雅黑'"; //設置字體
//context.textBaseline = 'Top'; context.textAlign = 'start'; 文字相對於浏覽器頂部和左側的對齊方式
context.fillText('Canvas',50,50);
context.strokeText('Canvas',70,100);
}
</script>
<head>
<body onload="drawText('canvas');">
<canvas id="canvas" width="400px" height="400px" ></canvas>
</body>
</html>
textBaseline和textAlign特點可以查看其他資源，就不在這混亂主題了。
4.將畫保存
window.location = canvas.toDataURL('image/jpeg'); //保存圖像
可以選擇自己想要的格式。
5.動畫
var i=100;
function painting(){
//alert(1);
context.fillStyle = "gray"; //填充顏色
context.fillRect(i,0,10,10); //參數：x,y,width,height。繪制“已填色”的矩形,默認填充顏色是黑色
i=i+20;
}
function draw(id){
var canvas = document.getElementById(id); //獲取上下文對象，canvas很多常用方法都是基於這個對象實現的
var context = canvas.getContext('2d'); //目前參數只有2d
setInterval(painting,100); //事件單位是毫秒
i=0;
}
這個沒有做出效果。看到別人用上面的方法，但是我這樣寫沒有出來動畫，調試果然顯示painting函數內的context為定義。以後有時間再學習一下。