HTML5之canvas基础

前提

• 在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')