老师为什么圆的边框也变色
来源：4-10 编程练习
qq_慕瓜7049344
2020-08-23 22:58:17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background: skyblue;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('canvas'),
xt = canvas.getContext('2d');
canvas.width = '700';
canvas.height = '700';
// xt.save();
xt.arc(300,400,150,0,2*Math.PI,false);
xt.fillStyle='pink';
xt.fill();
xt.translate(300,400)
for(var i =0 ;i<4;i++){
xt.rotate(Math.PI/2);
xt.moveTo(0,-150);//圆心在哪 哪里就是原点
xt.lineTo(0,-130);
}
xt.moveTo(0,0);
xt.lineTo(80,0);
xt.moveTo(0,0);
xt.lineTo(15,-90);
xt.strokeStyle='blue'
xt.stroke();
// xt.restore();
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-08-24
同学你好， 因为最后绘制的蓝色线影响导致前面绘制的圆，所以圆的边框会变蓝色，建议：在绘制时针之前使用beginPath开启新的绘制路径，避免影响前面绘制的内容。另，效果图中指针颜色是黑色的。需要单独设置颜色。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题