在HTML中畫圖可以使用ｃａｎｖａｓ元素，這裏簡答的總結一下：
首先通過canvas元素實現畫布,代碼如下:
<!Doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
//獲取指定的canvas元素;
var canvas=document.getElementById("canvas);
//調用canvas元素的getContext方法訪問獲取2d渲染上下文。
var context=canvas.getContext('2d');
</script>
</body>
</html>
然後通過javascript來獲取canvas元素，需要記住的是所有的繪畫操作在canvas的context對象中進行，而不是在convas這個元素對象中，並且我們的繪畫是平面的，因此是二維的。
座標
第一個必須得了解的概念是座標，我們通過座標的位置來控制繪畫操作的開始以及結束位置。
以10爲單位的話，那個紅點就是（20，20），那A就是(30,50)。
矩形
fillRect會畫出實心的矩形，strokeRect會畫出空心的矩形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>繪製矩形</title>
<style>
#canvas {
background: #ddd;
}
</style>
</head>
<body>
<canvas id="canvas" width="300px" height="300px"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.strokeRect(40,20,80,80);
context.fillRect(20,120,120,60);
</script>
</body>
</html>
效果如下:
繪製線條
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//開始設置路徑
context.beginPath();
//設置路徑原點
context.moveTo(10,20);
//設置路徑終點
context.lineTo(50,20);
//繪畫路徑
context.stroke();
三角形
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
//開始設置路徑
context.beginPath();
//設置路徑原點
context.moveTo(100,50);
//設置路徑終點
context.lineTo(100,200);
context.lineTo(250,200);
context.lineTo(100,50); //可以通過contex.closePath();來代替，就是自動幫我們把路徑閉合。
//繪畫路徑
context.stroke();
context.fill(); //控制是否是實心
繪製文本
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillText('fillText',20,50);
context.strokeText('strokeText',20,100);
context.font='30px 黑體'; //控制字體的大小以及字體類型
context.fillText('strokeText2',20,200);
給圖形上色
<canvas id="canvas" width="300px" height="300px"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillStyle='blue'; //只會其作用與它後後面的代碼
context.fillRect(50,50,160,160);
修改線條寬度
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.fillStyle='blue'; //只會其作用與它後後面的代碼
context.lineWidth=10; //控制寬度
context.strokeRect(50,50,160,160);
擦除canvas
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
context.arc(40,40,20,0,Math.PI*2,false);
context.closePath();
context.fill();
context.clearRect(40,40,canvas.width,canvas.height);