［零基础学HTML5］第三课.拓展：画颗圆圆的棋子 - 围棋新人吧

level 13

JohnYe3333 楼主

上节课我们讲到了画色块，这节课我们来看看怎么画棋子。

2016年04月03日 10点04分 1

level 13

JohnYe3333 楼主

先来看看怎么画圆好了。
在上节课的代码里添加2行代码：
context.arc(200,100,100,0,Math.PI*2,true);
context.stroke();
再看看效果：

在这张图上，我们留了个红色色块作背景，这样可以更好地帮助我们理解arc这个api里面各个参数的意义。

2016年04月03日 10点04分 2

level 13

JohnYe3333 楼主

全部代码如下：
－－－－－－－－－－
<!DOCTYPE html>
<html>
<head>
<title>lesson 3-1</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="testcanvas" width="800" height="400"></canvas>
<script>
canvas = document.getElementById('testcanvas');
context = canvas.getContext('2d');
context.fillStyle = "#f00";
context.fillRect(0,0,200,100);
context.strokeStyle = "#0f0";
context.strokeRect(0,0,200,100);
context.strokeStyle = "#0ff";
context.arc(200,100,100,0,Math.PI*2,true);
context.stroke();
</script>
</body>
</html>
－－－－－－－－－－

2016年04月03日 11点04分 4

level 13

JohnYe3333 楼主

把stroke改成fill的话，画出来的就是实心圆。
我试了下，画出黑白两枚棋子来。

2016年04月03日 11点04分 5

level 13

JohnYe3333 楼主

关键代码如下：
－－－－－－－－－
context.fillStyle = "#000";
context.arc(150,50,50,0,Math.PI*2,true);
context.fill();
context.beginPath();
context.fillStyle = "#fff";
context.arc(50,50,50,0,Math.PI*2,true);
context.fill();
－－－－－－－－－

2016年04月03日 11点04分 6

level 13

JohnYe3333 楼主

说明1： beginPath
如果只画一颗棋子的话，我们只要指定颜色，再画圆,填色就好了。
如果要画两颗不同颜色的棋子的话，我们需要加一句beginPath告诉后一fill不要把前一个fill的颜色覆盖掉。 biginPath实际是指定fill stroke的作用范围，只对beginPath之后的线条、图形起作用。

2016年04月03日 11点04分 7

level 13

JohnYe3333 楼主

总索引在此：
［技术水］零基础学HTML5，目标：做个网页版的围棋App
（ https://tieba.baidu.com/p/4446488002 ）

2016年04月03日 11点04分 8

level 12

♤重逢弓腰姬

人工置顶

2016年04月04日 15点04分 9