canvas实例（基础）

JS实现五子棋大战：GitHub源码

知识点总结：

第一步、基础：

 //获取canvas

 var chess = document.getElementById('chess');

 //获取上下文，创建上下文对象

 var context = chess.getContext('2d');

canvas绘制直线、设置画笔颜色

 //设置画笔颜色

 context.strokeStyle = '#bfbfbf';

 context.moveTo(0, 0);

 context.lineTo(450, 450);

 //画线

 context.stroke();//描边

canvas画圆、填充渐变色

 //画圆

 context.beginPath();

 context.arc(200, 200, 100, 0, 2*Math.PI);

 context.closePath();

 context.fill(); //填充

 //实现渐变

 //gradient是一个渐变对象

 var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 20);

 gradient.addColorStop(0, '#0A0A0A');

 gradient.addColorStop(1, '#636766');

 context.fillStyle = gradient;