【HTML5】Canvas标签

Canvas是HTML5中新增的一个布局元素！

在Silverlight中Canvas是三大布局控件之一，主要属性有:

(定位属性：)

Canvas.Left,Canvas.Top

 

HTML5中的Canvas标签

HTML：

 

 1 <!--声明文档类型为HTML5类型文档-->
 2 
 3 <!DOCTYPE HTML/>
 4 
 5 <html lang="zh-CN">
 6 
 7 <head>
 8 
 9 <title>canvas标签</title>
10 
11 <script type="text/javascript">
12 
13 function pageload(){
14 
15 　　var canvas=Document.GetElementById("mycanvas");//根据ID获取当前元素的对象
16 
17 　　var context=canvas.getContext("2d");
18 
19 　　context.fillStyle="#EEE";//填充Canvas的Fill属性的样式
20 
21 　　context.fillRect(x,y,width,height);
22 
23  
24 
25 　　context.strokeStyle="Black";//边框样式
26 
27 　　context.strokeRect(x,y,width,height);
28 
29 　　
30 
31 　　context.font="12px";
32 
33 　　context.fillText("string文本",x,y);
34 
35 }
36 
37 </script>
38 
39 </head>
40 
41 <body onload="pageload();">
42 
43 <canvas id="mycanvas" width="400" height="400" style="background-color:rgba(222,222,222,0.9)">
44 
45 　　您当前的浏览器不支持canvas标签。
46 
47 </canvas>
48 
49 </body>
50 
51 </html>

 

 

把HTML以下的这段代码直接粘贴到一个记事本中，然后该名称XXX.HTML/HTM即可。

同时还能检测当前浏览器是否支持HTML5！

posted @ 2012-03-16 13:28  GeneralKING  阅读(236)  评论(0)  编辑  收藏  举报