1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Canvas</title> 5 <style type="text/css"> 6 body 7 { 8 font-size:70%; 9 font-family:verdana,helvetica,arial,sans-serif; 10 } 11 </style> 12 <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(function () { 15 //用Canvas画 16 var c = document.getElementById("myCanvas"); 17 var cxt = c.getContext("2d"); 18 //画线条 19 cxt.moveTo(10, 10); 20 cxt.lineTo(150, 50); 21 cxt.lineTo(10, 50); 22 cxt.stroke(); 23 //画红圈圈 24 cxt.fillStyle = "#FF0000"; 25 cxt.beginPath(); 26 cxt.arc(70, 18, 15, 0, Math.PI * 2, true); 27 cxt.closePath(); 28 cxt.fill(); 29 //渐变效果 30 var grd = cxt.createLinearGradient(100, 100, 175, 50); 31 grd.addColorStop(0, "#FF0000"); 32 grd.addColorStop(1, "#00FF00"); 33 cxt.fillStyle = grd; 34 cxt.fillRect(100, 100, 180, 80); 35 //把一幅图像放在画布上 36 var c2 = document.getElementById("myCanvas2"); 37 var cxt2 = c2.getContext("2d"); 38 var img = new Image() 39 img.src = "../images/flower.png" 40 cxt2.drawImage(img, 0, 0); 41 }); 42 function cnvs_getCoordinates(e) { 43 x = e.clientX; 44 y = e.clientY; 45 document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")"; 46 } 47 function cnvs_clearCoordinates() { 48 document.getElementById("xycoordinates").innerHTML = ""; 49 } 50 </script> 51 </head> 52 <body style="margin:0px;"> 53 <p>把鼠标悬停在下面的矩形上可以看到坐标：(div实现）</p> 54 <div id="coordiv" style="float:left;199px;height:99px;border:1px solid #B148DD" 55 onmousemove="cnvs_getCoordinates(event)" 56 onmouseout="cnvs_clearCoordinates()"></div> 57 <br /> 58 <br /> 59 <br /> 60 <div id="xycoordinates"></div> 61 62 <br /><br /><br /><br /> 63 <p style="color:Fuchsia">用Canvas画</p> 64 <canvas id="myCanvas" width="500" height="200" style="border:1px solid #B148DD;"> 65 画布一 66 </canvas> 67 <canvas id="myCanvas2" width="500" height="300" style="border:1px solid #B148DD;"> 68 画布二 69 </canvas> 70 </body> 71 </html>
有一个小问题，把一朵花放在画布上，刷新浏览器才显示（Firefox)
