Canvas 绘制时钟_技术问答

首页免费课 Canvas 绘制时钟问答

Canvas 绘制时钟

                
                Silva Zhou
            Web前端工程师

                    查看讲师更多课程 
                    Silva Zhou讲师的其他课程
                
Requirejs和自动打包
中级·14715
免费课程
                                
                难度中级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.73
                            141人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.7
                                逻辑清晰

全部评论问答未解决精华

慕桂英6678052

function drawHour(hour,minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;
var mrad=2*Math.PI/12/60 *minute;
ctx.rotate(rad+mrad);
ctx.lineWidth=6;
ctx.lineCap='round';
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.lineWidth=3;
ctx.lineCap='round';
ctx.moveTo(0,10);
ctx.lineTo(0,-r+30);
ctx.stroke();
ctx.restore();
}

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle='#c14543';
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1, -r + 18);
ctx.lineTo(-1, -r + 18);
ctx.fill();
ctx.restore();
}

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

function drawDot(){
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(0,0,3,0,2*Math.PI,false);
ctx.fill();
}

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

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();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
setInterval(draw,1000);

0 4-1 Canvas动态的时分秒

2016-12-24

fuxy526

老师讲的容易懂，有收获

2016-12-23

qq_吃不吃_03871880

老师肯定是湖南人

7 4-2 Canvas时钟特效

2016-12-22

圆的半径从r变成r-5怎么来的，没听懂

最赞回答 / Qzhor

理论上讲我也觉得是r-10，线宽10那两边不都得减10么，哈哈，但是。。实际上是r-5才能实现效果，具体我也不懂T T~~前面一堆长篇大论的不知道在云云什么东东。。

4 回答 935 浏览 3-1 Canvas 时钟外边框圆

2016-12-22

大神呀帮忙修改下为何不动

已采纳回答 / udnernahs

var canvas = document.getElementById("clock") canvas.width =200 canvas.height = 200 var ctx = canvas.getContext("2d") var width=ctx.canvas.width; var height=ctx.canvas.height; var r=width/2; function drawDot(){ ...

3 回答 1017 浏览 4-1 Canvas动态的时分秒

2016-12-20

jQuery用的什么插件

最赞回答 / qq_狼人_3

sublime 的jQuery插件啊

2 回答 842 浏览 3-2 Canvas绘制时钟内容

2016-12-20

clock.js:3 Uncaught TypeError: Cannot read property 'getContext' of null

已采纳回答 / 慕勒5926719

你的<canvas>的id是clack,var dom=document.getElementById('clock');这个获得的又是clock,不一致

3 回答 1498 浏览 3-1 Canvas 时钟外边框圆

2016-12-20

谁来帮帮我

最新回答 / Future晨

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas Clock</title></head><body><div style="margin:100px 100px;"> <canvas id="clock" height="200" width="200"></ca...

2 回答 752 浏览 3-1 Canvas 时钟外边框圆

2016-12-20