HTML5体验canvas标签使用(涂鸦板 + 冰冻效果)-html语言教程_H5之家

HTML5体验canvas标签使用(涂鸦板 + 冰冻效果)

自己做的canvas的一个简单效果（IE现不支持canvas标签）
ps：虽说canvas的效果强大感觉还是难比flash啊

大概说说其中的关键：
用canvas在绘画时，最主要的就是对于画布的坐标系的设定，可以通过translate（），transform（），rotate（），scale（）等来改变，不要认为这两个rotate（），scale（）与坐标系无关，实质也是改变的坐标系，一个是改变坐标系x，y轴与水平的角度，另一个是改变x，y的单位长度。其实translate（），rotate（），scale（）都可以用transform（）来代替。
另外 save() 和 restore（）这两个千万不要认为是对画面内容的保存和恢复，实质最主要的是对坐标系设置的保存和恢复，当然还有一些样式的保存和恢复。

对canvas应用还希望和大家一起讨论讨论

我的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var Droplet=function(x,y,l){
this.x=x;
this.y=y;
this.timer=0;
this.length=l||Math.random()*100;
this.width=Math.random()*this.length/2;
this.draw=function(ctx){
  ctx.beginPath();
  ctx.save();
  ctx.globalCompositeOperation = "source-over";
  ctx.lineCap="round";
  ctx.lineJoin = "round";
  var gradient1 = ctx.createRadialGradient(0,1,1,3,1,5);

     gradient1.addColorStop(0.0, '#ffffff');
     gradient1.addColorStop(0.9, '#99ccff');
     gradient1.addColorStop(1, 'rgba(1,159,255,0)');
  ctx.strokeStyle=gradient1;
  ctx.lineWidth=Math.round(this.length/(Math.random()*5+4))>1?Math.round(this.length/(Math.random()*5+4)):1;
  if(Math.random()<0.2) this.width--;

  ctx.translate(parseInt(this.x),parseInt(this.y++));
  ctx.moveTo(0,0);
  ctx.lineTo(1,0);
  ctx.stroke();
  ctx.restore();

  this.length--;

  if(this.length<0) clearInterval(this.timer);
};

this.drawDroplet=function(ctx){
  var _this=this;
  this.timer=setInterval(function(){_this.draw.call(_this,ctx);},10);
  if(Math.random()*this.length>20){
   var d=new Droplet(x+Math.random()*10-5,y+Math.random()*10-5);
   d.drawDroplet(ctx);
  }

}

}

var lx,ly;
function show(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
ctx.globalCompositeOperation = "destination-over";
ctx.save();
ctx.translate(lx,ly);

var radgrad = ctx.createRadialGradient(0,0,0,0,3,10);

    radgrad.addColorStop(0.1, '#ffffff');
    radgrad.addColorStop(0.9, '#66aaff');
ctx.lineWidth=5;
ctx.lineJoin = "round";
ctx.lineCap="round";
ctx.beginPath();
ctx.strokeStyle='#77aaff';
ctx.moveTo(0,0);

ctx.lineTo(x-lx,y-ly);
lx=x;
ly=y;
ctx.stroke();
ctx.restore();
var d=new Droplet(x+Math.random()*15-15,y,Math.random()*20+20);
d.drawDroplet(ctx);
if(Math.random()<0.2){
  var d=new Droplet(x+Math.random()*15-10,y);
  d.drawDroplet(ctx);
}
}
function clearC(){
var canvas = document.getElementById('tutorial');
canvas.width=canvas.width;
}
window.onload=function(){

var canvas = document.getElementById('tutorial');
canvas.onmousedown=function(e){
  e=e||event;
  var x =lx = e.clientX - canvas.offsetLeft;
  var y =ly = e.clientY - canvas.offsetTop;
  canvas.onmousemove=show;
  var ctx = canvas.getContext('2d');
  ctx.moveTo(x,y);
  document.onmouseup=function(){
   canvas.onmousemove=null;
  }
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#fff;">
    <canvas id="tutorial" width="850" height="600" style="position:relative;left:0px;"></canvas>
<input type="button" value="clear" onclick="clearC();">
</body>
<script>
</script>
</html>