[英]building a clock with html canvas
我想使用HTML5,画布和JavaScript创建时钟。 但是我不明白为什么当我用Sublime运行以下代码时什么也看不到。 我尝试同时使用Internet Explorer和Google Chrome浏览器。 也许错误在代码中?
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Clock</title>
<!--<script src="clockJS.js" ></script>-->
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<img id="myImage" />
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '28d1fa';
ctx.linewidth = 17;
ctx.lineCap = "round";
ctx.shadowBlur = 15;
ctx.shadowColor = '28d1fa';
function degToRad(degree) {
var factor = Math.PI / 180;
return degree * factor;
}
function renderTime() {
var now = new Date();
var today = now.toDateString();
var time = today.toLocaleTimeString();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
var newSeconds = seconds + (milliseconds/1000);
//Background
gradient = ctx.createRadioGradient(250, 250, 5, 250, 250, 300);
gradient.addColorStop(0, '09303a');
gradient.addColorStop(1, 'black');
ctx.fillStyle = gradient;
//ctx.fillStyle = '333333';
ctx.fillRect(0, 0, 500, 500);
//Hours
ctx.beginPath();
ctx.arc(250, 250, 200, degToRad(270), degToRad((hours*15)-90));
ctx.stroke();
//Minutes
ctx.beginPath();
ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes*6)-90));
ctx.stroke();
//Seconds
ctx.beginPath();
ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds*6)-90));
ctx.stroke();
//Date
ctx.font = "23px Arial bold";
ctx.fillStyle = '28d1fa';
ctx.fillText(today, 175, 250);
//Time
ctx.font = "23px Arial";
ctx.fillStyle = '28d1fa';
ctx.fillText(time, 175, 280);
var dataUrl = canvas.toDataUrl();
document.getElementById('myImage').src = dataUrl;
}
setInterval(renderTime, 40);
</script>
</body>
</html>
有人能帮我吗?
更改此行:
var time = today.toLocaleTimeString();
gradient = ctx.createRadioGradient(250, 250, 5, 250, 250, 300);
var dataUrl = canvas.toDataUrl();
对此:
var time = now.toLocaleTimeString();
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
var dataUrl = canvas.toDataURL();
那应该让您进入屏幕。 我建议您使用Chrome的开发者控制台查看所有JavaScript错误。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } } function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); }
<canvas id="canvas" width="400" height="400" style="background-color:#333"> </canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.