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 | <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo</title> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <![endif]--> <script> window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); mycontext.fillStyle='rgb(0,0,255)'; mycontext.fillRect(0,0,400,400); mycontext.fillStyle='rgb(255,0,0)'; mycontext.fillRect(50,50,300,300); mycontext.fillStyle='rgb(0,255,0)'; mycontext.fillRect(100,100,200,200); mycontext.fillStyle='rgb(100,100,100)'; mycontext.fillRect(125,175,150,25); } </script> </head> <body> <div style="margin-left:30px;"> <canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid"> </canvas> <br /><br /> <a href="index.html">back</a> </div> </body> </html> |
1 | var mycanvas=document.getElementById("myCanvasTag"); |
1 | var mycontext=mycanvas.getContext('2d'); |
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 | <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo</title> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <![endif]--> <script> window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); mycontext.fillStyle='rgb(0,0,255)'; mycontext.fillRect(30,30,300,300); mycontext.fillStyle='rgba(0,255,0,0.5)'; mycontext.fillRect(60,60,300,300); mycontext.fillStyle='rgba(255,0,0,0.25)'; mycontext.fillRect(90,90,300,300); } </script> </head> <body> <div style="margin-left:30px;"> <canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid"> </canvas> <br /><br /> <a href="index.html">back</a> </div> </body> </html> |
1 2 3 4 5 6 7 | var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); var mygradient=mycontext.createLinearGradient(30,30,300,300); mygradient.addColorStop(0,"#FF0000"); mygradient.addColorStop(1,"#00FF00"); mycontext.fillStyle=mygradient; mycontext.fillRect(0,0,400,400); |
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 | <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo</title> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <![endif]--> <script> window.onload=function() { var mycanvas=document.getElementById("myCanvasTag"); var mycontext=mycanvas.getContext('2d'); var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300); mygradient.addColorStop("0","magenta"); mygradient.addColorStop(".25","blue"); mygradient.addColorStop(".50","green"); mygradient.addColorStop(".75","yellow"); mygradient.addColorStop("1.0","red"); mycontext.fillStyle=mygradient; mycontext.fillRect(0,0,400,400); } </script> </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> </body> </html> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |