Html5之Canvas画布

 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>
Canvas
有一个小问题，把一朵花放在画布上，刷新浏览器才显示（Firefox)