【HTML5与css3权威指南】canvas

<!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次，所以圆的颜色会变浅（没有关闭路径）