老师我还是有一个疑问啊
来源：4-10 编程练习
菜鸟00001
2019-04-13 14:25:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.myCanvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="myCanvas" class="myCanvas">
您当前浏览器不支持canvas，请升级您的浏览器。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 600;
ctx.beginPath();
ctx.translate(200,200);
ctx.arc(0,0,100,0,Math.PI *2,true);
ctx.fillStyle = "#FFB5C5";
ctx.fill();
ctx.beginPath();
for(var i=0;i<4;i++){
ctx.rotate(Math.PI/2);
ctx.moveTo(85,0);
ctx.lineTo(100,0);
}
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle ="blue";
ctx.moveTo(0,0);
ctx.lineTo(0,-80);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle ="blue";
ctx.rotate(Math.PI/2);
ctx.moveTo(0,0);
ctx.lineTo(0,-80);
ctx.stroke();
</script>
</body>
</html>
老师我想知道钟表的这个圆心点 怎么画出来呢，为什么我画之后直接就知道圆心点在什么地方呢
1回答
-
Miss路
2019-04-13
同学，你好。
你自己能做出来，但是不知道圆心在哪儿？你好好分析一下自己怎么一步一步实现的，我给你提醒一下：
你自己分析完再往下看我给你的答案。
圆心在200,200的位置，因为一开始你就设置了translate（200,200），所以不管是圆的圆心，还是刻度的圆心都在这个位置。即使后面再设置圆arc的圆心为0,0 ，那也是建立在200,200的基础上的。
如果帮助到了你，欢迎采纳！
祝学习愉快！
0
相似问题