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;