html5之globalAlpha

var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillStyle="#FD0";
cxt.fillRect(0,0,75,75);
cxt.fillStyle="#6C0"
cxt.fillRect(75,0,75,75);
cxt.fillStyle="#09F";
cxt.fillRect(0,75,75,75);
cxt.fillStyle="#F30";
cxt.fillRect(75,75,75,75);


cxt.fillStyle="#FFF";

cxt.globalAlpha=0.2;

for (i=0; i<7; i++)
{
cxt.beginPath();
cxt.arc(75,75,10+10*i,0,Math.PI*2,true);
cxt.fill();
}

cxt.arc(75,75,10+10*i,0,Math.PI*2,true);

75,75            圆心坐标

10+10*i        半径

0                    起始弧度

Math.PI*2     结束弧度（划整圆）

true               顺时针划圆

效果如下：

rotate旋转（中心点始终是Canvas的原点，如果要改变它，需要使用 translate 方法）

function drawDiagonal(){
var canvas = document.getElementById("diagonal");
var context = canvas.getContext('2d');
context.translate(100,100);
for (var i=1;i<6;i++){ 
context.save();  
context.fillStyle  = 'rgb('+(51*i)+','+(255-51*i)+',255)';    
for (var j=0;j<i*6;j++){     
context.rotate(Math.PI*2/(i*6));  
context.beginPath();  
context.arc(0,i*12.5,5,0,Math.PI*2,true);  
context.fill();  
}  
  
context.restore();  
} 
}
window.addEventListener("load",drawDiagonal,true);

效果如下：

translate正余弦函数

function drawSpirograph(ctx,R,r,O){ 
var x1 = R-O;  
var y1 = 0;  
var i = 1;  
ctx.beginPath();  
ctx.moveTo(x1,y1);  
do {  
  if (i>20000) break;  
  var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))  
  var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
  ctx.lineTo(x2,y2);  
  x1 = x2;  
  y1 = y2;  
  i++;  
} while (x2 != R-O && y2 != 0 );  
ctx.stroke();  
} 
//调用部分代码 
window.addEventListener("load",function(){
var canvas = document.getElementById("diagonal");
var context = canvas.getContext('2d');
context.fillRect(0,0,300,300);  
for (var i=0;i<3;i++) {  
  for (var j=0;j<3;j++) {  
  context.save();  
  context.strokeStyle = "#9CFF00"; //描边颜色 
  context.translate(50+j*100,50+i*100); //移动中心点   
  drawSpirograph(context,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);context.restore();  
  }  
} 
},true);

效果如下：