码迷,mamicode.com
首页 > 其他好文 > 详细

canvas绚丽的随机曲线

时间:2015-08-04 10:46:04      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

 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>

 

技术分享

canvas绚丽的随机曲线

标签:

原文地址:http://www.cnblogs.com/liujinyu/p/4701242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!