Canvas 创建
因为 <canvas 是 HTML 中的一个元素,所以创建一个 <canvas> 很简单
<canvas id="myCanvas" width="200" height="100"></canvas>
几个重要的属性如下
| 属性 | 说明 |
|---|---|
| id | 指定画布 <canvas> 的唯一名称 |
| width | 指定画布 <canvas> 的宽度,默认为 300px |
| height | 指定画布 <canvas> 的高度,默认为 150px |
| style | 指定画布 <canvas> 的样式 |
例如下面的代码就创建了一个默认大小 ( 300 X 150) 的画布
<canvas id="canvas-1"></canvas>
在浏览器中显示如下
边框
白茫茫一片,对的,忘记说了,画布默认是没有边框的
我们可以使用 border CSS 属性给画布添加边框
<canvas style="border:1px solid green"></canvas>
在浏览器中显示如下
高宽
我们可以改变 width 和 height 来定制画布的大小,例如下面的的代码创建了一个 300x300 的画布
<canvas style="width:300px;height:300px;border:1px solid green;"></canvas>
在浏览器中显示如下