HTML5 cavans的使用

逃离我推掉我的手 2022-08-04 05:15 136阅读 0赞

**  一、 Canvas是什么？**

## Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，而且操作的画图就是js，所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。 ##

##  二、 Canvas是中的重要元素context    ##

## (1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。  例如： `<canvas id="demoCanvas" width="500" height="500"> <p>爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？</p> </canvas>`  (2) 当然只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了，Canvas绘制图形都是靠着Canvas对象的上下文对象.  代码：   `<script type="text/javascript"> //第一步：获取canvas元素 var canvasDom = document.getElementById("demoCanvas"); //第二步：获取上下文 var context = canvasDom.getContext('2d'); </script>`  (3) Context上下文默认两种绘制方式：第一种：绘制线（stroke），第二种：填充：fill。  注意：决定了使用哪种方式之后，在填充或者绘制线之前先设置样式。  三、来展示一个例子： ##

### Canvas绘制的总体的步骤 ###

*  创建HTML页面，设置画布标签
 *  编写js，获取画布dom对象
 *  通过Canvas标签的Dom对象获取上下文
 *  设置绘制线样式、颜色
 *  绘制矩形，或者填充矩形

代码：

`<` `body` `>`

`    ` `<` `canvas`  `id="demoCanvas" width="500" height="500">`

`        ` `<` `p` `>爷，你还在上个世纪吧，现在都html5了，您还在ie6时代？</` `p` `>`

`    ` `</` `canvas` `>`

`    ` ``

`    ` `<` `script`  `type="text/javascript">`

`        `

`        ` `//第一步：获取canvas元素`

`        ` `var canvasDom = document.getElementById("demoCanvas");`