前提
- 在html中写入标签
<canvas id='canvas' width='200' height='300'></canvas> - 在
<script></script>中获取<canvas>标签并绘制环境。
var canvas=document.getElementById('canvas')
var context=canvas.getContext('2d');
canvas可以分为2步：绘制和填充。
对于矩形来说，绘制是fillRect()和strokeRect()方法。对于路径来说是stroke()和fill()方法。而两者共有的属性是strokeStyle和fillStyle用于填充以及clearRect()方法。clearRect()可以接受4个参数。
绘制路径
绘制路径必须先调用beginPath()方法。表示开始绘制新的路径。绘制的时候要调用stroke()或者fill()方法，填充的时候要调用strokeStyle或者fillStyle属性，提笔在另一个位置绘制的时候要用moveTo()方法。
绘制直线用lineTo()方法，绘制圆用arc(圆心的x坐标，圆心的y坐标，半径，圆环开始的坐标，圆环结束的坐标，顺时针还是逆时针)
剪切用clip()方法，清除用clearRect()方法。
绘制文本
context.font='bold 14px Arial'
context.textAlign='center/start/end'
context.textBaseline='middle/bottom/top'
context.fillText('12',100,20)
context.strokeText('12',100,30)
变换
translate(x,y)执行这个方法后，圆点由(0,0)变换为指定的坐标。
阴影
context.shadowColor='rgba(0,0,0,0.5)'
context.shadowBlur=4;//模糊度
context.shadowOffsetY=5;
context.shadowOffsetX=4;//形状或路径沿y轴方向的偏移量。默认为0
渐变
- 设置
var gradient=context.createLinerGradient(30,30,70,80)//线性渐变开始位置和结束位置
- 使用
使用addColorStop()；来指定色标，这个方法接收两个参数：色标位置和css颜色值。其中色标位置是一个0(开始颜色)和1(结束颜色)之间的数字。
gradient.addColorStop(0,'white')
gradient.addColorStop(1,'blue')
