canvas 基础用法与绘制形状

<canvas>是一个可以使用脚本（通常为javascript）来绘制图形的HTML元素。它可以制作图片构图、绘制图表或者简单的动画，如下图：

除一些过时的浏览器不支持<canvas>元素外，所以的新版本主流浏览器都支持它。Canvas的默认大小为宽300像素x高150像素。

01 基础用法

<canvas>元素

<canvas id="myCanvas" width="150" height="150"></canvas>

<canvas>看起来和<img>元素很像，唯一的不同是它并没有src和alt属性。实际上，<canvas>标签只有两个属性：width和height。

渲染上下文（The rendering context）

<canvas>元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。

var canvas = document.getElemenById('myCanvas);var ctx = canvas.getContext('2d')

代码的第一行为id为myCanvas的<canvas>元素得到DOM对象。

一旦有了元素对象，我们可以通过使用它的getContext()方法来访问绘画上下文。

一个简单的例子：

<canvas id="myCanvas" width="300" height="150"></canvas><script type