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;