一个 web 页面上的多个 canvas_H5之家 - 中国HTML5教程资源分享第一站

一个 web 页面上的多个 canvas

HTML

<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo</title>  <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> <!--该代码片段来自于: >