刚学H5，请帮忙看看哪里错了

前朝遗民 2019-04-24 11:14:21

图书馆借的书，因为没有光盘，只是摸索着按书上敲了源码，难免漏了语句。画了一个时钟，本来是想每隔一秒，刷新一次，但不知道为什么每次都缩小了尺寸，怎么改？请各位大师指正，谢谢！

<html>
<head>
<title>No Title</title>
</head>

<body>

<canvas id="djx" style="border: 1px solid;" widht="400" height="400"> </canvas>

<script>

var canvas = document.getElementById("djx");
var context = canvas.getContext("2d");

time(canvas);

function time(canvas) {
clock();
setInterval(clock,1000);
}

function clock() {

var now = new Date();
context.save();

context.clearRect(0, 0, 150, 150);
context.translate(75, 75);

context.scale(0.4, 0.4);

context.rotate(-Math.PI / 2);

context.strokeStyle = "#000";

context.fillStyle = "white";
context.lineWidth = 8;
context.lineCap = "round";

context.save();

for (var i = 0; i < 12; i++) {
context.beginPath();
context.rotate(Math.PI / 6);
context.moveTo(100, 0);
context.lineTo(120, 0);
context.stroke();
}

//画时间刻度虚线
context.save();

context.lineWidth=5;
for (i=0;i<60;i++){
if (i%5!=0){
context.beginPath();
context.moveTo(117,0);
context.lineTo(120,0);
context.stroke();
}
context.rotate(Math.PI/30);
}
context.restore();
//设置时间变量
var sec=now.getSeconds();

var min=now.getMinutes();
var hr=now.getHours();

hr=hr>=12?hr-12:hr;

//绘制时针
context.save();

context.rotate(hr*(Math.PI/6)+(Math.PI/360)*min+(Math.PI/21600)*sec);

context.lineWidth=14;
context.beginPath();
context.moveTo(-20,0);
context.lineTo(80,0);
context.stroke();
context.restore();

//绘制分针
context.save();

context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

context.lineWidth=10;
context.beginPath();
context.moveTo(-28,0);
context.lineTo(112,0);
context.stroke();
context.restore();

//绘制秒针
context.save();

context.rotate(sec*Math.PI/30);
context.strokeStyle="#D40000";
context.fillStyle="#D40000";

context.lineWidth=6;
context.beginPath();
context.moveTo(-30,0);
context.lineTo(83,0);
context.stroke();
context.restore();

//绘制边框
context.save();

context.beginPath();
context.lineWidth=14;
context.strokeStyle="#325FA2";
context.arc(0,0,142,0,Math.PI*2, true);
context.stroke();
context.restore();

}

</script>

</body>

</html>

...全文

263 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

前朝遗民 2019-04-30

打赏
举报

谢谢！受教了！！

前朝遗民 2019-04-28

打赏
举报

引用 1 楼河南棒小伙的回复:

context.scale(0.4, 0.4);这行代码不是缩小的吗？扔了就行了

扔了，也不行，你可以试试

河南棒小伙 2019-04-28

打赏
举报

我上次没有仔细看，现在我仔细看了一遍你的逻辑，我指出以下几点错误： 1、你的canvas上面width写错了，导致宽度没有生效。 2、那个context.scale（0.4，0.4）确实该删掉，否则，表盘会越来越小。 3、context.translate函数你要理解，它是重新定义坐标轴原点的位置，也就是说你每次运行clock()函数的时候，它都会重新定义（0，0）的位置，导致它每次刷新的时候，表盘都会右下角移动，所以，把它放到clock外面就行了，然后每次清空表盘的时候，clearRect函数是从左上角坐标（0，0），清空多宽，多高，移动中心位置之后，左上角坐标现在是（-200，-200）了，clearRect(-200,-200,400,400)。 4、context.rotate（-math.PI）这个东西，我知道你的用意是转到零点的位置，但是它没起作用。简单办法，就是你算出的时分秒度数减去math.pi/2. 下面是改过之后的源代码。 <html> <head> <title>No Title</title> </head> <body> <canvas id="djx" style="border: 1px solid;" width="400" height="400"> </canvas> <script> var canvas = document.getElementById("djx"); var context = canvas.getContext("2d"); context.translate(200, 200); time(canvas); function time(canvas) { clock(); setInterval(clock, 1000); } function clock() { var now = new Date(); context.save(); context.clearRect(-200, -200, 400, 400); // context.translate(75, 75); // context.scale(0.4, 0.4); // context.rotate(-Math.PI / 2); context.strokeStyle = "#000"; context.fillStyle = "white"; context.lineWidth = 8; context.lineCap = "round"; context.save(); for (var i = 0; i < 12; i++) { context.beginPath(); context.rotate(Math.PI / 6); context.moveTo(100, 0); context.lineTo(120, 0); context.stroke(); } //画时间刻度虚线 context.save(); context.lineWidth = 5; for (i = 0; i < 60; i++) { if (i % 5 != 0) { context.beginPath(); context.moveTo(117, 0); context.lineTo(120, 0); context.stroke(); } context.rotate(Math.PI / 30); } context.restore(); //设置时间变量 var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); hr = hr >= 12 ? hr - 12 : hr; //绘制时针 context.save(); context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec - Math.PI / 2); context.lineWidth = 14; context.beginPath(); context.moveTo(-20, 0); context.lineTo(80, 0); context.stroke(); context.restore(); //绘制分针 context.save(); context.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec - Math.PI / 2); context.lineWidth = 10; context.beginPath(); context.moveTo(-28, 0); context.lineTo(112, 0); context.stroke(); context.restore(); //绘制秒针 context.save(); context.rotate(sec * Math.PI / 30 - Math.PI / 2); context.strokeStyle = "#D40000"; context.fillStyle = "#D40000"; context.lineWidth = 6; context.beginPath(); context.moveTo(-30, 0); context.lineTo(83, 0); context.stroke(); context.restore(); //绘制边框 context.save(); context.beginPath(); context.lineWidth = 14; context.strokeStyle = "#325FA2"; context.arc(0, 0, 142, 0, Math.PI * 2, true); context.stroke(); context.restore(); } </script> </body> </html>

河南棒小伙 2019-04-25