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 46 47 48 49 50 51 52 53 54 55 56 | <!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 mycontext1=document.getElementById("myCanvasTag1").getContext('2d'); var mycontext2=document.getElementById("myCanvasTag2").getContext('2d'); var mycontext3=document.getElementById("myCanvasTag3").getContext('2d'); var mycontext4=document.getElementById("myCanvasTag4").getContext('2d'); // gradient 1 var mygradient1=mycontext1.createLinearGradient(30,30,90,90); mygradient1.addColorStop(0,"#FF0000"); mygradient1.addColorStop(1,"#00FF00"); mycontext1.fillStyle=mygradient1; mycontext1.fillRect(0,0,100,100); // gradient 2 var mygradient2=mycontext2.createLinearGradient(30,30,90,90); mygradient2.addColorStop(1,"#FF0000"); mygradient2.addColorStop(0,"#00FF00"); mycontext2.fillStyle=mygradient2; mycontext2.fillRect(0,0,100,100); var mygradient3=mycontext3.createLinearGradient(30,30,90,90); mygradient3.addColorStop(0,"#0000FF"); mygradient3.addColorStop(.5,"#00FFDD"); mycontext3.fillStyle=mygradient3; mycontext3.fillRect(0,0,100,100); var mygradient4=mycontext1.createLinearGradient(30,30,90,90); mygradient4.addColorStop(0,"#DD33CC"); mygradient4.addColorStop(1,"#EEEEEE"); mycontext4.fillStyle=mygradient4; mycontext4.fillRect(0,0,100,100); } </script> </head> <body> <div style="margin-left:30px;"> <canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid"> </canvas> <canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid"> </canvas> <br /> <canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid"> </canvas> <canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid"> </canvas> <br /><br /> <a href="index.html">back</a> </div> </body> </html> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |