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>
在浏览器中显示如下