共计 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 对象,例如上面的代码。