HTML5怎样创建画布？使用画布方法讲解

　　在网页中，画布并不是默认存在的，用户首先需要创建画布，然后通过一些对象和方法可以在画布中绘制图案，下面将分步骤讲解使用画布的方法。

　　1. 创建画布

　　使用HTML5中的canvas标签可以在网页中创建画布。创建画布的基本语法格式如下。

您的浏览器不支持canvas

　　在上面的语法格式中，canvas标签用于定义画布，id属性用于在JavaScript代码中引用画布。canvas标签是一个双标签，用户可以在中间输入文字，当浏览器不支持canvas标签，就会显示输入的文字信息。画布有width和height两个属性用于定义画布的宽度和高度，取值可以为数字或像素。

　　创建完成的画布是透明的，没有任何样式，可以使用CSS为其设置边框、背景等。需要注意的是，设置画布宽高时，尽量不要使用CSS样式控制其宽高，否则可能使画布中的图案变形。

　　2. 获取画布

　　要想在JavaScript中控制画布，首先要获取画布。使用getElementById()方法可以获取网页中的画布对象。例如下面的示例代码，就是为了获取id名为“cavs”的画布，同时将获取的画布对象保存在变量“canvas”中。

var canvas = document.getElementById('cavs');

　　3. 准备画笔

　　有了画布之后，要开始绘图，还需要准备一只画笔，这支画笔就是context对象。context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。context对象可以使用JavaScript脚本获得，具体语法如下所示：

canvas.getContext('2d');

　　在上面的语法中，参数“2d”代表画笔的种类，表示二维绘图的画笔，如果绘制三维图形可以把参数替换为“webgl”，由于三维操作目前还没有广泛的应用，这里了解即可。

　　在JavaScript中，我们通常会定义一个变量来保存获取的context对象，例如下面的代码。

var context = canvas.getContext('2d');

猜你喜欢：

HTML5 WebSocket Client使用详解1

HTML5新增了哪些标签？

传智教育H5教程：HTML5+CSS3视频教程

传智教育web前端培训课程