canvas实例（基础）

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

知识点总结：

第一步、基础：

1 //获取canvas
2 var chess = document.getElementById(‘chess‘);
3
4 //获取上下文，创建上下文对象
5 var context = chess.getContext(‘2d‘);

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

1 //设置画笔颜色
2 context.strokeStyle = ‘#bfbfbf‘;
3
4 context.moveTo(0, 0);
5 context.lineTo(450, 450);
6 //画线
7 context.stroke();//描边

canvas画圆、填充渐变色

 1 //画圆
 2 context.beginPath();
 3 context.arc(200, 200, 100, 0, 2*Math.PI);
 4 context.closePath();
 5 context.fill(); //填充
 6
 7 //实现渐变
 8 //gradient是一个渐变对象
 9 var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 20);
10
11 gradient.addColorStop(0, ‘#0A0A0A‘);
12 gradient.addColorStop(1, ‘#636766‘);
13
14 context.fillStyle = gradient;