1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo</title> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <![endif]--> </head> <body> <div style="margin-left:30px;"> <canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid"> </canvas> <br /><br /> <a href="index.html">back</a> </div> <script> var mycanvas = document.getElementById("myCanvasTag") var mycontext = mycanvas.getContext('2d'); var x; var y; var x2; var y2; var r; var g; var b; function line() { x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190); r=Math.floor(Math.random()*255); g=Math.floor(Math.random()*255); b=Math.floor(Math.random()*255); mycontext.moveTo(x, y); mycontext.lineTo(x2, y2); mycontext.strokeStyle='rgb(' + r + ',' + g + ',' + b + ')'; mycontext.lineWidth=Math.floor(Math.random()*6); mycontext.stroke(); mycontext.restore(); } setInterval(line, 100); </script> </body> </html> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |