老师，画表盘刻度的线时，起始位置是以圆形的中心点位吗？
来源：4-10 编程练习
前端菜鸟HH
2020-09-24 19:26:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//在此处编写代码
context.translate(300, 300);
context.save();
context.beginPath();
context.fillStyle = '#ffc0cb';
context.arc(0, 0, 150, 0, Math.PI * 2, true);
context.fill();
context.restore();
context.beginPath();
context.fillStyle = '#806066';
for(var i = 0; i < 4; i++){
context.rotate(Math.PI / 2);
context.moveTo(134, 0);
context.lineTo(150, 0);
}
context.stroke();
context.beginPath();
lineWidth = 1;
context.strokeStyle = '#2b20f6';
context.moveTo(0, 0);
context.lineTo(10, -120);
context.moveTo(0, 0);
context.lineTo(120, 0);
context.stroke();
</script>
</body>
</html>
1回答
-
同学你好，代码是正确的，问题解答如下：
起始位置是圆形的中心位置，因为canvas是600*600的，context.translate(300, 300);这句代码，将绘制的圆心，移到了300, 300处，即中心位置，然后以中心位置为起点，绘制圆形和其他内容。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题
回答 1
回答 1