问题描述
- 关于html5canvas的画时钟问题
-
<script type="text/javascript"> var canvas,context; function window_onload(){ canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); setInterval("draw()",1000); } </script> </head> <body onLoad="window_onload()"> <canvas width="800" height="800" id="myCanvas"></canvas> </body> </canvas> <script> function draw(){ var radius=250; var now=new Date(); var sec=now.getSeconds(); var mins=now.getMinutes(); var hour=now.getHours(); ctx.save(); ctx.clearRect(0,0,800,800); ctx.translate(400,400); ctx.rotate(-Math.PI/2); ctx.stroke(); ctx.save(); /*画圆盘*/ ctx.lineWidth="7"; ctx.beginPath(); ctx.arc(0,0,250,2*Math.PI,false); ctx.stroke(); ctx.restore(); /*画小时刻度*/ ctx.save(); ctx.strokeStyle="blue"; ctx.lineWidth="3"; ctx.beginPath(); for(x=0;x<12;x++){ ctx.rotate(30*Math.PI/180); ctx.moveTo(240,0); ctx.lineTo(200,0); } ctx.stroke(); ctx.restore(); /*画分钟刻度*/ ctx.save(); ctx.strokeStyle="red"; ctx.beginPath(); for(x=0;x<60;x++){ if(x%5!=0){ ctx.moveTo(240,0); ctx.lineTo(220,0); } ctx.rotate(6*Math.PI/180); } ctx.stroke(); ctx.restore(); /*画秒针*/ ctx.save(); ctx.rotate(sec*6*Math.PI/180); ctx.strokeStyle="red"; ctx.beginPath(); ctx.moveTo(190,0); ctx.lineTo(0,0); ctx.stroke(); ctx.restore(); ctx.save(); ctx.restore(); ctx.restore(); } </script>以上为代码，为啥钟上会有两个秒针？
解决方案
function draw() {
var radius = 250;
var now = new Date();
var sec = now.getSeconds();
var mins = now.getMinutes();
var hour = now.getHours();
ctx.save();
ctx.clearRect(0, 0, 800, 800);
ctx.translate(400, 400);
ctx.rotate(-Math.PI / 2);
// ctx.stroke();////这里多了个stroke，所以多绘制了一条线
ctx.save();
解决方案二：
是不是还有一个时针，或者你没有擦除？
参考：http://chenjinfei.blog.51cto.com/2965201/770655/
解决方案三：
用HTML5 Canvas画的时钟
效果图
<!doctype?html>?<html>?<head>?<meta?charset="utf-8">?<title>canvas钟表_by?http://www.sitejs......
答案就在这里：用HTML5 Canvas画的时钟
解决方案四：
你的代码不全，
没法分析，请提高全面的代码，
时间： 2024-09-15 12:39:24