Canvas 简介与SVG 简介

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() 方法获得，基本语法