Canvas画三个实心圆为什么中间会填充颜色？

Ice lie 2018-08-23 09:21:46

代码：

<!DOCTYPE HTML>

<head>

<title>this is a dice game!!!</title>

<style>

.btn-cls{

position:absolute;

top:400px;

left:250px;

}

</style>

</head>

<body>

<canvas id="canvas" width="600" height="600">

your browser doesn't support the HTML5 element canvas.

</canvas>

<button id="btn" class="btn-cls" onclick="Throw()" >开始投掷</button>

<script>

var ctx; // canvas上下文

var point1,point2;

ctx = document.getElementById('canvas').getContext('2d');

// 绘制画布

ctx.strokeRect(0,0,600,600);

// 绘制两个骰子

ctx.strokeRect(100,100,150,150);

ctx.strokeRect(350,100,150,150);

function Throw(){ // 投掷按钮

point1 = Math.ceil(Math.random() * 6);

point2 = Math.ceil(Math.random() * 6);

DrawPoint(point1,point2);

}

function DrawPoint(drawPoint1,drawPoint2){ // 绘制骰子上面的点

ctx.clearRect(110,110,130,130);

ctx.beginPath();

ctx.arc(135,215,5,0,2 * Math.PI);

ctx.arc(215,215,5,0,2 * Math.PI);

ctx.arc(215,135,5,0,2 * Math.PI);

ctx.fillStyle = "block";

ctx.closePath();

ctx.fill();

}

</script>

</body>

...全文