canvas绚丽的随机曲线 

 1 <!DOCTYPE >
 2 <html >
 3 <body>
 4 <canvas    width="800" height="450"></canvas>
 5 <script>
 6 var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 7 var width = context.canvas.width; 
 8 var height = context.canvas.height;
 9 var lastX = width * Math.random();
10 var lastY = height * Math.random();
11 var hue = 0;
12 function line (){
13     
14     context.save();
15     context.translate(width/2, height/2);
16     context.scale(0.9, 0.9);
17     context.translate(-width/2,-height/2);
18 
19     context.beginPath();
20     context.lineWidth = 5 + Math.random() *10;
21     context.moveTo(lastX, lastY);
22     lastX = width * Math.random();
23     lastY = height * Math.random();
24 
25     context.bezierCurveTo(width*Math.random(),height*Math.random(),width*Math.random(),height*Math.random(),lastX,lastY);
26 
27     hue = hue + 10 *Math.random();
28     context.strokeStyle = 'hsl('+ hue +',50%,50%)';
29     context.shadowColor = 'white';
30     context.shadowBlur = 10;
31 
32     context.stroke();
33     context.restore();
34 }
35 setInterval(line,100);
36 function background(){
37     context.fillStyle = 'rgba(0,0,0,0.1)';
38     context.fillRect(0,0, width, height)
39 
40 }
41 setInterval(background, 100)
42 </script>
43 </body>
44 </html>

 

posted @ 2015-08-04 10:20  刘金宇  阅读(474)  评论(0)    收藏  举报