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;