HTML5的Canvas组件

1、创建一个canvas标签

<canvas id="test-canvas" width="300" height="200"></canvas>

由于浏览器对HTML5标准支持不一致，所以，通常在<canvas>内部添加一些说明性HTML代码，如果浏览器支持Canvas，它将忽略<canvas>内部的HTML，如果浏览器不支持Canvas，它将显示<canvas>内部的HTML

2、进行绘制

绘制形状

我们可以在Canvas上绘制各种形状。在绘制前，我们需要先了解一下Canvas的坐标系统：

Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。

坐标格式（开始的x坐标，开始的y坐标，结束的x坐标，结束的y坐标）

var
    canvas = document.getElementById('test-canvas'),         //取的canvas
    ctx = canvas.getContext('2d');          //告诉js要用2d进行绘制
    ctx.clearRect(0,0,200,200);         //清除一个矩形区域,Rect是矩形的意思
    ctx.fillStyle = " red ";            //填充的颜色是...         fill是填充的意思
    ctx.fillRect(0,0,200,200)          //联系上下的意思就是填充一个矩形区域
    ctx.fillText('内容',开始x坐标,开始y)       //填充文字

单词解释：

fill是填充的意思，也可以理解为绘制

Rect是矩形的意思