canvas绘制时钟
你的浏览器不支持canvas，请更换浏览器!
(() {
=.();
=.();
.=;
.=;
=.;
=.;
=/;
() {
.();
.(,);
.=;
.(,,-,,*.);
.();
.();
=[,,,,,,,,,,,];
(=;<.;++)
{
.=;
.=;
.=;
=*./*;
=(-)*.();
=(-)*.();
.([],,);
}
(=;<;++)
{
=*./*;
=(-)*.();
=(-)*.();
.();
(%===)
{
.=;
.(,,,,*.);
}
{
.=;
.(,,,,*.);
}
.();
}
}
() {
.();
.=;
.(,,,,*.);
.();
}
(hour,minute) {
.();
.();
=*./*hour+*.//*minute;
.();
.=;
.=;
.(,);
.(,-/);
.();
.();
}
(minute) {
.();
.();
=*./*minute;
.();
.=;
.=;
.(,);
.(,-+);
.();
.();
}
(second) {
.();
.();
.=;
=*./*second;
.();
.(,);
.(-,);
.(-,-+);
.(,-+);
.();
.();
}
() {
.(,,,);
=Date();
=.();
=.();
=.();
();
(,);
();
();
();
.();
}
();
(,);
})();
3 回答
maolaixin
TA贡献1条经验 获得超0个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas绘制时钟</title>
</head>
<body>
<canvas id="demo">
你的浏览器不支持canvas，请更换浏览器!
</canvas>
<script>
(function () {
var canvas=document.getElementById("demo");
var ctx=canvas.getContext("2d");
canvas.height=600;
canvas.width=600;
var w=canvas.width;
var h=canvas.height;
var r=w/2;
function drawBackgroud() {
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=15;
ctx.arc(0,0,r-15,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
var hoursNumber=[3,4,5,6,7,8,9,10,11,12,1,2];
for (var i=0;i<hoursNumber.length;i++)
{
ctx.font="35px Arial";
ctx.textAlign="center";
ctx.textBaseline="middle";
var rad=2*Math.PI/12*i;
var x=(r-60)*Math.cos(rad);
var y=(r-60)*Math.sin(rad);
ctx.fillText(hoursNumber[i],x,y);
}
for (var i=0;i<60;i++)
{
var rad=2*Math.PI/60*i;
var x=(r-35)*Math.cos(rad);
var y=(r-35)*Math.sin(rad);
ctx.beginPath();
if (i%5===0)
{
ctx.fillStyle="#000";
ctx.arc(x,y,5,0,2*Math.PI);
}
else
{
ctx.fillStyle="#ccc";
ctx.arc(x,y,5,0,2*Math.PI);
}
ctx.fill();
}
}
//绘制时针、分针、秒针
function drawDot() {
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(0,0,5,0,2*Math.PI);
ctx.fill();
}
function drawHour(hour,minute) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute;
ctx.rotate(rad);
ctx.lineWidth=10;
ctx.lineCap="round";
ctx.moveTo(0,20);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawMinute(minute) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.lineWidth=5;
ctx.lineCap="round";
ctx.moveTo(0,20);
ctx.lineTo(0,-r+60);
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.beginPath();
ctx.fillStyle="red";
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(2,20);
ctx.lineTo(-2,20);
ctx.lineTo(-1,-r+40);
ctx.lineTo(1,-r+40);
ctx.fill();
ctx.restore();
}
function draw() {
ctx.clearRect(0,0,w,h);
var now=new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
drawBackgroud();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
draw();
setInterval(draw,1000);
})();
</script>
</body>
</html>
西兰花伟大炮
TA贡献376条经验 获得超318个赞
你这是乱码的，你看看我的找找问题吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画一个时钟</title>
<style>
#canvas{
margin:200px auto;
border: 1px solid #e9e0b5;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" height="300px" width="300px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width /2;
/*canvas绘制环境*/
function drawBackGround(ctx){
/*绘制圆框，60点，数字*/
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.arc(0,0,r-5,0,Math.PI * 2);
ctx.lineWidth = 10;
ctx.stroke();
ctx.closePath();
ctx.font = "18px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
var hoursNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
/*传入的number为数组值，i为数组索引*/
hoursNumber.forEach(function (number,i) {
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30);
/*cos与sin传入的是弧度值，包括rotate也是弧度，但是css中为deg*/
var y = Math.sin(rad) * (r - 30);
ctx.fillText(number,x,y);
});
for(var i= 0;i < 60;i++){
var radDot = 2 * Math.PI / 60 * i;
var x = Math.cos(radDot) * (r - 18);
var y = Math.sin(radDot) * (r - 18);
ctx.beginPath();
if(i % 5 === 0){
ctx.arc(x,y,2,0,Math.PI *2);
ctx.fillStyle = "#000";
}else
{
ctx.arc(x,y,2,0,Math.PI *2);
ctx.fillStyle = "gray";
}
ctx.fill();
}
}
function drawHour(hour,minnue){
ctx.save();
ctx.beginPath();
var rad = Math.PI * 2 / 12 *hour;
var mrad = Math.PI * 2 / 12 / 60 * minnue;
/*分针会导致时针的运动，需要加上分针引起的弧度，每分钟会导致时针变化的弧度*/
ctx.rotate(rad + mrad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r + 48);
ctx.lineCap = "round";
ctx.lineWidth = 6;
ctx.stroke();
ctx.restore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = Math.PI * 2 / 60 * minute;
ctx.rotate(rad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r + 36);
ctx.lineCap = "round";
ctx.lineWidth = 3;
ctx.stroke();
ctx.restore();
};
function drawSecond(second) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = 'red';
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.lineCap = 'round'
ctx.moveTo(2, 10);
ctx.lineTo(-2, 10)
ctx.lineTo(-1, -r + 18);
ctx.lineTo(1,-r+18);
ctx.fill();
ctx.restore();
/*绘制秒针时要顺着一个方向将点连接起来，不要交叉，不然会断成两截*/
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(0,0,3,0,Math.PI * 2);
ctx.fill();
/*中间的白点*/
}
function draw(){
ctx.clearRect(0,0,width,height);
/*每秒进行一次重绘*/
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackGround(ctx);
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore()
}
draw();
setInterval(draw,1000);
</script>
</body>
</html>- 3 回答
- 0 关注
- 1468 浏览
添加回答
举报
0/150
提交
取消