HTML5 標籤用於繪製圖像（通過腳本，通常是 JavaScript）。
不過， 元素本身並沒有繪製能力（它僅僅是圖形的容器） 必須使用腳本來完成實際的繪圖任務
實例1：
繪製線條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border:1px solid red;}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.lineWidth=20;
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.moveTo(30,30);
ctx.lineTo(300,300);
ctx.lineTo(30,300);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.moveTo(400,20);
ctx.lineTo(400,400);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>
實例2：
繪製圖形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border:1px solid red;}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.fillStyle="blue";
ctx.arc(200,200,100,0,90/180*Math.PI,false);
//ctx.stroke();
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
實例3：
繪製字體/圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border:1px solid red;}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
/*ctx.strokeStyle="red";
ctx.fillStyle="blue";
ctx.font="100px 微軟雅黑";
var str="許昌";
//ctx.strokeText(str,0,100);
ctx.fillText(str,0,100);*/
var img=new Image();
img.src="image/16pic_5199192_b.jpg";
img.onload=function(){
ctx.drawImage(img,634,227,185,185,10,10,185*2,185*2);
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
</body>
</html>
實例4：
創建漸變
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border: 1px solid #ccc;}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
//線性漸變
/*var mycolor=ctx.createLinearGradient(50,50,400,400);
mycolor.addColorStop(0,"red");
mycolor.addColorStop(0.5,"white");
mycolor.addColorStop(1,"green");
ctx.moveTo(50,50);
ctx.lineTo(300,50);
ctx.stroke();
ctx.fillStyle=mycolor;
ctx.fillRect(0,100,500,100);*/
// 徑向漸變
var mycolor=ctx.createRadialGradient(250,250,1,250,250,200);
mycolor.addColorStop(0,"blue");
mycolor.addColorStop(1,"red");
ctx.fillStyle=mycolor;
ctx.arc(250,250,250,0,2*Math.PI);
ctx.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>
實例5：
讓圖片動態移動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border:2px solid #ccc;}
</style>
<script type="text/javascript">
var t;
var img;
window.onload=function(){
img =new Image();
img.src="image/b2.jpg";
img.onload=function(){
t=window.setInterval(drawarc,100);
}
}
var x=0;
var y=100;
function drawarc(){
var convas=document.getElementById("mycanvas");
var ctx=convas.getContext("2d");
/*ctx.strokeStyle="red";
ctx.lineWidth=10;
ctx.moveTo(10,10);
x++;
ctx.lineTo(x,y);
ctx.stroke();
if(x>400){
window.clearInterval(t);
}*/
x+=2;
//清除畫布
ctx.clearRect(0,0,500,500);
ctx.drawImage(img,x,y);
if(x>400){
window.clearInterval(t);
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>
實例6：
畫布變換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mycanvas{border:1px solid red;}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.strokeRect(150,200,200,100);
//縮放
//ctx.scale(0.5,0.5);
//旋轉
//ctx.rotate(-45/180*Math.PI);
//平移畫布，重新定義原點
ctx.translate(250,250);
ctx.translate(100,100);
ctx.rotate(45/180*Math.PI);
ctx.strokeStyle="blue";
ctx.strokeRect(-100,-50,200,100);
}
</script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>
實例7：
把畫布顯示在一張圖片上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
#mycanvas{border:1px solid red; margin: 100px;}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("mycanvas");
var btn=document.getElementById("btnshow");
btn.onclick=function(){
var canvas=document.getElementById("mycanvas");
var url=canvas.toDataURL("jpg");
var img=document.getElementById("myimg");
img.src=url;
}
canvas.onclick=function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
//alert(event.x+","+event.y);
//alert(canvas.offsetLeft);
var x=event.x-canvas.offsetLeft;
var y=event.y-canvas.offsetTop;
ctx.fillStyle="#000000";
ctx.arc(x,y,20,0,2*Math.PI);
ctx.fill();
}
}
</script>
</head>
<body>
<input type="button" value="顯示圖片" id="btnshow"/><img src="" id="myimg"/>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>