H5的画布标签canvas

怎么使用

• 首先创建一个canvas标签，用自带的高度和宽度属性设置宽高，如果在css里面写宽高会导致画布失帧

<canvas id="canvas" width="500" height="500"></canvas>

• 获取画布和设置画笔，画笔通过canvas.getContext(“2d”)来设置也可以设置3d

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")//设置画笔

• 开始绘画，绘画的所有样式比如颜色，都需要在绘画之前设置才能生效，这里先用画布方法实心矩形绘画，fillRect（）一共有四个参数1.-2是x和y轴坐标，开始于画布左上角3-4是绘制大小，
• 绘画空心矩形strokeRect（）也有四个参数跟fillRect（）一样

        context.shadowColor = "red";//设置阴影颜色
        context.shadowOffsetX = -5;//设置阴影水平距离
        context.shadowOffsetY = -5;
        context.shadowBlur = 5;//设置阴影模糊度
        context.fillRect(10,10,100,100)//绘画实心矩形

• 上面讲到了设置样式必须在绘画之前设置，来看看设置样式

1. 设置填充样式，就是实行矩形

context.fillStyle = "red"
context.fillRect(10,10,100,100)

2. 设置空心样式

context.strokeStyle = "black" 
context.strokeRect(120,10,100,100)

• 设置线性渐变需要调用createLinearGradient方法来创建渐变这个方法有一个返回值需要接收，然后调用addColorStop()方法设置渐变颜色

3. 设置线性渐变

var grad = context.createLinearGradient(0,0,500,500)
grad.addColorStop(0.2,"red")//在0-0.2的位置设置红色
grad.addColorStop(0.5,"yellow")//在0.2-0.5设置黄色
grad.addColorStop(0.8,"blue")//在0.5-0.8设置蓝色

• 圆形是通过acr方法绘画出来的绘画的是以设置的坐标点中心绘画圆，还需要通过Math.PI，arc（）四个参数1-2是x,y坐标参数3-4是绘画圆以什么点开始绘画什么点结束
  

4. 设置圆形，可以设置空心或实心通过stroke和fill来改变

        context.beginPath()
        context.fillStyle = "blue"
        context.arc(100,100,100,0,Math.PI*2)
        context.fill()