canvas（一）基本用法

<canvas>是一个可以使用脚本（JavaScript）在其中绘制图形的HTML元素，它可以用于制作照片或者制作简单的动画。

<canvas> 元素

<canvas>看起来和<img>元素很相像，唯一的不同就是没有 src 和 alt 属性。<canvas>只有两个属性——width和height。默认情况下canvas会初始宽度为300像素和高度为150像素的画板。

  <canvas id='canvas' width='300' height='150'></canvas>

给<canvas>标签添加 id 属性，方便 js 代码对该 canvas 面板进行操作
闭合标签 </canvas> 不能省略

内容替换

<canvas>不同于其他标签，由于某些较老的浏览器不支持该html元素，需要留下替换的信息。

只需要在<canvas>标签内部提供替换内容，支持<canvas>的浏览器将会忽略包含在容器中的内容，并且只是正常的渲染<canvas>。

<canvas id='canvas' width='300' height='150'>
    current stock price:$$$$
</canvas>

渲染上下文

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

<canvas>起初是空白的，为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas>元素有一个叫做getContext()的方法，这个方法是用来获取渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')

检查支持性

替换内容是用在不支持<canvas>标签的浏览器中展示的。通过简单的测试 getContext() 方法是否存在，脚本可以检查编程支持性。

let canvas = document.getElementById('canvas')
if(canvas.getContext()){
    let ctx = canvas.getContext()
    //code....
}