<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <canvas id='myCanvas' width='200' height='100'></canva> </body> </html>
做一条直线（js代码）：
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.moveTo(1,1); ctx.lineTo(20,30); ctx.stroke();
矩形：
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.fillStyle='#ff0000'; ctx.fillRect(0,0,120,90);
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.strokeStyle='#ff0000'; ctx.strokeRect(0,0,90,90);
ctx.lineWidth = 5; //边框的宽度
灰色的画布上画一个带蓝框的红色正方形：
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.fillStyle='#eeeeee'; //画布为灰色 ctx.fillRect(0,0,200,100); ctx.fillStyle='red'; ctx.strokeStyle = 'blue'; ctx.fillRect(50,10,80,80); ctx.strokeRect(50,10,80,80);
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.fillStyle = '#ff0000'; ctx.fillRect(0,0,90,90); ctx.clearRect(10,10,35,35); //擦除指定矩形区域中的图形,使得矩形区域中的颜色变为透明
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.beginPath(); ctx.arc(40,40,20,0,Math.PI*2,true); ctx.closePath(); ctx.fillStyle='#ff0000'; ctx.fill();//fill()为填充图形，stroke()为绘制图形边框
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.fillStyle='#eeeeee'; ctx.fillRect(0,0,400,300); for(var i=1;i<=10;i++){ ctx.beginPath(); ctx.arc(20*i,20*i,i*5,0,Math.PI*2,true); ctx.closePath(); ctx.fillStyle='rgba(255,0,0,0.25)';//透明度
ctx.fill(); }
var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); ctx.fillStyle='#eeeeee'; ctx.fillRect(0,0,400,300); for(var i=1;i<=10;i++){ //ctx.beginPath(); ctx.arc(20*i,20*i,i*10,0,Math.PI*2,true); //ctx.closePath(); ctx.fillStyle='rgba(255,0,0,0.45)'; ctx.fill(); }
//第一个圆绘制10次，第二个圆绘制9次，第三个圆绘制……第10个圆绘制1次，所以圆的颜色会变浅（没有关闭路径）