Canvas 表示画布,现实生活中的画布是用来作画的。
HTML5 中的 Canvas :我们可以称它为“网页中的画布”。默认情况下,Canvas 是一块 300px*150px 的矩形画布,用户可以自定义画布的大小或为画布添加其他属性。
利用 Canvas 实现绘画:Canvas 并不是通过鼠标绘画的,而是用户需要通过 JavaScript 来控制画布中的内容,例如添加图片、线条、文字等。
使用Canvas绘制图形
<canvas> 标签
使用 HTML5 中的 <canvas> 标签在网页中创建一个画布
基本语法
<canvas id="canvas" width="400" height="300"></canvas>
上述代码定义了一个 id 为 canvas 的画布,并设置了画布的宽度为 400px,高度为 300px。
通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象,代码如下所示:
var canvas = document.getElementById("canvas");
上述代码获取了 id 为 canvas 的画布,同时将获取的画布对象保存在变量 canvas 中。
context对象:是画布的上下文,也叫做绘制环境,是所有的绘制操作 API 的入口。 context 对象可以使用 getContext() 方法获得,基本语法