1、繪製矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas繪製矩形</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
//從DOM上得到畫布對象的句柄
var canvas = document.getElementById("canvas1");
//請求畫布提供一個可供繪製的上下文（context），在這裏請求2D上下文，賦給context變量
var context = canvas.getContext("2d");
//定義畫布的填充顏色，如省略此句代碼，則默認爲黑色。
context.fillStyle = "red";
//調用畫布填充矩形的方法。
context.fillRect(50,50,60,100);
};
</script>
</head>
<body>
<canvas id="canvas1" width="600" height="300"></canvas>
</body>
</html>
效果如下：
方法詳解：
context.fillRect(x,y,width,height);其中（x,y）是矩形的起點的座標，width，height分別定義矩形的寬和高。
2、繪製三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas描繪三角形</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
//從DOM上得到畫布對象的句柄
var canvas = document.getElementById("canvas2");
//請求畫布提供一個可供繪製的上下文（context），在這裏請求2D上下文，賦給context變量
var context = canvas.getContext("2d");
//使用beginPath方法告訴畫布要開始一個新路徑
context.beginPath();
//定義路徑的起點
context.moveTo(100,150);
//lineTo方法描路徑，從起點描到(250,75)
context.lineTo(250,75);
//從(250,75)描到(125,30)
context.lineTo(125,30);
//用closePath方法閉合路徑
context.closePath();
//設置線寬在路徑上畫線
context.lineWidth = 5;
//用線描路徑
context.stroke();
//設置顏色來用紅色填充三角形
context.fillStyle = "red";
//用紅色填充三角形
context.fill();
};
</script>
</head>
<body>
<canvas id="canvas2" width="600" height="300"></canvas>
</body>
</html>
效果如下：
3、繪製圓形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas繪製圓形</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
//從DOM上得到畫布對象的句柄
var canvas = document.getElementById("canvas3");
//請求畫布提供一個可供繪製的上下文（context），在這裏請求2D上下文，賦給context變量
var context = canvas.getContext("2d");
//使用beginPath方法告訴畫布要開始一個新路徑
context.beginPath();
//繪製圓形的方法
context.arc(150,150,50,0,2*Math.PI,true);
//設置線寬在路徑上畫線
context.lineWidth = 5;
//用線描路徑
context.stroke();
//設置填充顏色爲淺藍色
context.fillStyle = "lightblue";
//填充顏色
context.fill();
};
</script>
</head>
<body>
<canvas id="canvas3" width="600" height="300"></canvas>
</body>
</html>
效果如下：
方法詳解：
context.arc(x,y,radius,startAngle,endAngle,direction);x,y：確定圓心在畫布上的座標；
radius：定義圓的半徑；
startAngle，endAngle：弧的起始角和終止角確定了路徑在圓上的起點和終點；
direction：角可以按照逆時針度量（角度是負的，如”-45°“），也可以按照順時針度量（角度是正的，如”45°“），如果direction爲true，就逆時針畫弧，如果direction爲false，就順時針畫弧。
degreesToRadians(degrees)方法詳解：
在畫布中，角的單位都用弧度表示，而不是度，因此定義degreesToRadians(degrees)方法，將角度轉換爲弧度。
function degreesToRadians(degrees){
return (degrees * Math.PI)/180;
}因此，在上邊繪製圓形的例子中，context.arc(150,150,50,0,2*Math.PI,true);也可以表示爲context.arc(150,150,50,0,degreesToRadians(360),true);
4、一個例子
爲了在畫布上實現如下效果：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="smileface.js"></script>
<title>繪製一個笑臉</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="smilecanvas" width="600" height="550"></canvas>
</body>
</html>
smileface.js文件：
window.onload = function(){
drawSmileFace();
};
function drawSmileFace(){
var canvas = document.getElementById("smilecanvas");
var context = canvas.getContext("2d");
//這是圓臉
context.beginPath();
context.arc(300,300,200,0,degreesToRadians(360),true);
context.fillStyle = "#ffffcc";
context.fill();
context.stroke();
//這是左眼
context.beginPath();
context.arc(200,250,25,0,degreesToRadians(360),true);
context.stroke();
//這是右眼
context.beginPath();
context.arc(400,250,25,0,degreesToRadians(360),true);
context.stroke();
//這是鼻子
context.beginPath();
context.moveTo(300,300);
context.lineTo(300,350);
context.stroke();
//這是嘴巴
context.beginPath();
context.arc(300,350,75,degreesToRadians(20),degreesToRadians(160),false);
context.stroke();
}
function degreesToRadians(degrees){
return (degrees * Math.PI)/180;
}