第一篇简书献给<canvas>,作为一个自我督促,以下效果也可通过CSS3实现
<canvas></canvas>标签提供一个容器，可以用脚本在其中作图
步骤一：在html中写入<canvas id=“”></canvas>；
步骤二：在javascript中获取对象：
var canvas = document.getElementById("id");
var context = canvas.getContext("2d");
步骤三：创意时刻
注：画板的默认长宽是300px*150px，如需改变需要利用js进行相关的调整
绘制矩形：
context.fillRect(x,y,width,height); //填充
strokeRect(x,y,width,height); //描边
context.fillStyle = "red"; //填充颜色
context.strokeStyle = "blue"; //描边颜色
context.fillStyle = "rgba(255,0,0,0.2)"; //设置填充透明度
context.strokeStyle = "rgba(255,0,0,0.2)"; //设置描边透明度
绘制圆弧：
context.beginPath();
context.arc(x, y, radius, starAngle,endAngle, anticlockwise);
context.closePath();
context.fill();
其中radius是半径，starAngle是开始角度，endAngle是结束角度，anticlockwise中true或false随便用，不设置style默认为黑色填充；方便起见，每做一个圆弧设置一个context.beginPath()和context.closePath()
绘制直线
context.moveTo(x,y); //设置起点
context.lineTo(x,y) //设置终点
context.stroke();
渐变
1.线性渐变
var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd); //渐变开始和结束坐标
lg.addColorStop(offset,color); //设置（0~1）之间颜色的偏移量
context.fillStyle =lg;
context.fillRect(x, y, width, height);
2.径向渐变
var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
rg.addColorStop(offset,color);
context.fillStyle = rg;
context.beginPath();
context.arc(xStart,yStart, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
呈现的效果是一个小球
