canvas是html5中新增加的一个元素，专门用来绘制图形。
意思是： 先引入canvas.js脚本文件。 然后指定id，创建一个宽500px，高350px。 再在body属性里使用onload="draw('canvas');"函数进行图形绘画。
html代码:
<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas> </body>js代码：
function draw(id){ // 获取canvas的id var canvas = document.getElementById('canvas'); // 取得上下文 var context = canvas.getContext('2d'); // 设置绘制样式：设置填充颜色、设置边框颜色、指定画笔的宽度 context.fillStyle = "#000"; context.strokeStyle = "#fff"; context.lineWidth = 5; // 填充与绘制边框 context.fillRect(0,0,500,350); context.strokeRect(50,50,180,120); context.strokeRect(100,100,180,120); }解析：
var canvas = document.getElementById(‘canvas’); 是获取canvas的id； var context = canvas.getContext(‘2d’); 是取得上下文，并设置为2d; context.fillStyle = “#000”; 表示画布填充颜色是黑色； context.strokeStyle = “#fff” ; 表示矩形边框颜色是白色； context.lineWidth = 5; 表示画笔粗细是5px context.fillRect(0,0,500,350); 表示填充颜色从 x轴0，Y轴0，填充的宽度是500，高度是350； context.strokeRect(50,50,180,120); 表示矩形x轴50，Y轴50，矩形的宽度是180，高度是180； context.strokeRect(100,100,180,120); 表示矩形x轴100，Y轴100，矩形的宽度是180，高度是180； 即两个矩形重叠一部分。
context.fillRect(x,y,width,hight); //x,y分别表示横向坐标起点，纵向坐标起点;width,hight分别表示填充的宽和高 context.strokeRect(x,y,width,hight); //x,y分别表示横向坐标起点，纵向坐标起点;width,hight分别表示矩形的宽和高html：
<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas> </body>js :
function draw(id){ // 1.获取canvas的id var canvas = document.getElementById('canvas'); //2. 取得上下文 var context = canvas.getContext('2d'); // 3.绘制背景颜色及区域 context.fillStyle = "#eee"; context.fillRect(0,0,500,350); // 4.开始路径 context.beginPath(); // 5.创建图形路径 context.arc(10,10,10,0,Math.PI*2,true); // 6.关闭图形路径 context.closePath(); // 7.设置圆形填充色 context.fillStyle = "rgba(250,0,0,0.25)"; context.fill(); } 解析： context.arc(x,y,radius,starAngle,endAngle,anticlockwise); x:横向起点坐标 y:纵向起点坐标 radius:圆半径 starAngle：开始角度 endAngle:结束角度 Math.PI*2代表360度 anticlockwise: 是否按照顺时针方向绘制html不变都一样。
js:
function draw(id){ // 获取canvas的id var canvas = document.getElementById('canvas'); // 取得上下文 var context = canvas.getContext('2d'); // 绘制背景 context.fillStyle = "#eee"; context.fillRect(0,0,500,350); for(var i = 0; i < 10;i++){ // 开始路径 context.beginPath(); // 创建图形路径 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); // 关闭图形路径 context.closePath(); // 设置填充颜色 context.fillStyle = "rgba(250,0,0,0.25)"; context.fill(); } }用for循环来进行绘画，让x轴，y轴，圆半径按倍数扩大。
html不变 js:
function draw(id){ // 获取canvas的id var canvas = document.getElementById('canvas'); // 取得上下文 var context = canvas.getContext('2d'); // 绘制背景 context.fillStyle = "#eee"; context.fillRect(0,0,500,350); for(var i = 0; i < 10;i++){ // 开始路径 context.beginPath(); // 创建图形路径 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); // 关闭图形路径 context.closePath(); // 设置边框颜色 context.strokeStyle = "green"; context.stroke(); } }js:
function draw(id){ // 获取canvas的id var canvas = document.getElementById('canvas'); // 取得上下文 var context = canvas.getContext('2d'); // 绘制背景 context.fillStyle = "#eee"; context.fillRect(0,0,500,350); for(var i = 0; i < 10;i++){ // 开始路径 context.beginPath(); // 创建图形路径 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); // 关闭图形路径 context.closePath(); // 设置填充色及边框颜色 context.fillStyle = "rgba(250,0,0,0.25)"; context.fill(); context.strokeStyle = "red"; context.stroke(); } }