HTML5的canvas标签

最新推荐文章于 2022-07-15 16:58:35 发布

月轩居士

最新推荐文章于 2022-07-15 16:58:35 发布

阅读量797

点赞数

分类专栏： Html5，Css3 文章标签： canvas html5

Html5，Css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.canvas标签

HTML5<canvas>元素用于图形的绘制，通过脚本（通常是JavaScript）来完成；

<canvas>标签只是图形容器，您必须使用脚本来绘制图形；

可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像。

2.标签

【使用canvas标签】代码示例：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
   
     <style>  
         .canvas{  
   
             background-color: antiquewhite;  
         }  
     </style>  
   
 </head>  
 <body>  
   
     <canvas class="canvas" width="200px" height="200px" ></canvas>  
       
 </body>  
 </html>  

【使用js创建canvas】代码示例：

（1）首先创建一个JavaScript文件，写入代码如下：

[javascript]view plain copy 
   
 print?
 /** 
  * Created by chenyufeng on 15/9/27. 
  */  
   
 var CANVAS_WIDTH = 200 , CANVAS_HEIGHT = 200;  
   
 window.onload = function(){  
   
     createCanvas();  
   
 }  
   
 function createCanvas(){  
   
     document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"  
 }  

（2）在HTML中实现如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
   
 </head>  
 <body>  
   
     <script src="app.js"></script>  
   
   
 </body>  
 </html>  

（3）最后的实现效果类似直接用<canvas>标签创建。

浏览器调试小技巧：
（1）个人比较喜欢chrome来调试；

（2）使用canvas时，右键浏览器页面，选择“审查元素”，就可以就行查看代码可调试，非常方便。

。

（3）调试界面如下：

。

月轩居士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的canvas标签

1.canvas标签HTML5元素用于图形的绘制，通过脚本（通常是JavaScript）来完成；标签只是图形容器，您必须使用脚本来绘制图形；可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像。2.标签【使用canvas标签】代码示例：[html] view plain copy
复制链接

扫一扫

专栏目录