共计 747 个字符，预计需要花费 2 分钟才能阅读完成。
在网页中，画布并不是默认存在的，用户首先须要创立画布，而后通过一些对象和办法能够在画布中绘制图案，上面将分步骤解说应用画布的办法。
1. 创立画布
应用 HTML5 中的 canvas 标签能够在网页中创立画布。创立画布的根本语法格局如下。
1
在下面的语法格局中，canvas 标签用于定义画布，id 属性用于在 JavaScript 代码中援用画布。canvas 标签是一个双标签，用户能够在两头输出文字，当浏览器不反对 canvas 标签，就会显示输出的文字信息。画布有 width 和 height 两个属性用于定义画布的宽度和高度，取值能够为数字或像素。
创立实现的画布是通明的，没有任何款式，能够应用 CSS 为其设置边框、背景等。须要留神的是，设置画布宽高时，尽量不要应用 CSS 款式管制其宽高，否则可能使画布中的图案变形。
2. 获取画布
要想在 JavaScript 中管制画布，首先要获取画布。应用 getElementById() 办法能够获取游戏网页中的画布对象。例如上面的示例 www.cungun.com 代码，就是为了获取 id 名为“cavs”的画布，同时将获取的画布对象保留在变量“canvas”中。
3. 筹备画笔
有了画布之后，要开始绘图，还须要筹备一只画笔，这支画笔就是 context 对象。context 对象也被称为绘制环境，通过该对象，能够在画布中绘制图形。context 对象能够应用 JavaScript 脚本取得，具体语法如下所示：
在下面的语法中，参数“2d”代表画笔的品种，示意二维绘图的画笔，如果绘制三维图形能够把参数替换为“webgl”，因为三维操作目前还没有宽泛的利用，这里理解即可。
在 JavaScript 中，咱们通常会定义一个变量来保留获取的 context 对象，例如上面的代码。