为什么刻度不显示
来源:4-10 编程练习
Aries典
2018-10-29 17:02:36
<!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.save()
ctx.arc(300,300,150,0,2*Math.PI,true);
ctx.fillStyle='pink';
ctx.fill();
ctx.restore();
ctx.beginPath();
//设置刻度
ctx.save()
for(i=0;i<4;i++){
ctx.rotate(Math.PI/4);
ctx.moveTo(300,150);
ctx.lineTo(300,180);
}
ctx.stroke();
ctx.restore();
ctx.beginPath();
//设置时分针
ctx.strokeStyle='blue';
ctx.moveTo(300,300);
ctx.lineTo(300,200);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,300);
ctx.lineTo(400,300);
ctx.stroke();
ctx.beginPath();
</script>
</body>
</html>
1回答
好帮手慕星星
2018-10-29
参考:
自己可以测试一下,祝学习愉快!
相似问题