【HTML5】Canvas标签

最新推荐文章于 2024-06-26 20:05:25 发布

amyu42747

最新推荐文章于 2024-06-26 20:05:25 发布

阅读量43

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/GeneralKING/archive/2012/03/16/HTML5.html

版权

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！

转载于:https://www.cnblogs.com/GeneralKING/archive/2012/03/16/HTML5.html

amyu42747

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML5】Canvas标签

Canvas是HTML5中新增的一个布局元素！在Silverlight中Canvas是三大布局控件之一，主要属性有:(定位属性：)Canvas.Left,Canvas.TopHTML5中的Canvas标签HTML： 1  2 3 <!DOCTYPE HTML/> 4...
复制链接

扫一扫