请老师检查，以及改进的地方
来源：4-10 编程练习
慕工程8318248
2020-05-21 19:05:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px">您的浏览器不支持</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//在此处编写代码
ctx.translate(300,300); // 平移原点
// 绘制表盘背景
ctx.arc(0,0,200,0,Math.PI*2,true);
ctx.strokeStyle="rgb(255,195,205)";
ctx.stroke();
ctx.fillStyle='rgb(255,195,205)';
ctx.fill();
// 绘制刻度
for(var i=0;i<4;i++){
ctx.beginPath();
ctx.moveTo(180,0);
ctx.lineTo(200,0);
ctx.rotate(Math.PI/2);
ctx.strokeStyle="#000";
ctx.stroke();
}
// 12点15的时针
ctx.save();
ctx.beginPath();
ctx.rotate(-Math.PI/2+Math.PI/24);
ctx.moveTo(0,0);
ctx.lineTo(150,0);
ctx.strokeStyle="blue";
ctx.stroke();
ctx.restore();
// 12点15的分针
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(170,0);
ctx.strokeStyle="blue";
ctx.stroke();
</script>
</body>
</html>
1回答
-
同学你好，实现效果是没有问题的。表盘这里，边框的颜色与背景的是一样的，看不出明显的边框，可以不设置哦，只填充背景，例：
祝学习愉快~
0
相似问题