Canvas 绘制时钟_技术问答

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

Canvas 绘制时钟

                
                Silva Zhou
            Web前端工程师

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

全部评论问答未解决精华

小罗子PK大魔王

那个视频一直闪屏，看的好晕

0 2-1 Canvas 绘制时钟--几何模型

2016-12-24

慕桂英6678052

var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

function drawBackground(){});

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=10;
ctx.arc(0,0,r - 5,0,2*Math.PI,false);
ctx.stroke();

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font='18px Arial';
ctx.textAlign='center';
ctx.textBaseline='middle';
hourNumbers.forEach(function(number,i){
var rad = 2*Math.PI/12 *i;
var x=Math.cos(rad)*(r-30);
var y=Math.sin(rad)*(r-30);
ctx.fillText(number,x,y);
});

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

for(var i=0;i<60;i++){}

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-18);
var y=Math.sin(rad)*(r-18);
ctx.beginPath();

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英6678052

if(i % 5 === 0){
ctx.fillStyle = '#000';
ctx.arc(x,y,2,0,2*Math.PI,false);
}else{
ctx.fillStyle = '#ccc';
ctx.arc(x,y,2,0,2*Math.PI,false);
}
ctx.arc(x,y,2.0,2*Math.PI,false);
ctx.fill();

0 4-1 Canvas动态的时分秒

2016-12-24

慕桂英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

首页上一页 13 14 15 16 17 18 19 下一页尾页

开始学习

课程须知: javascript基础知识

老师告诉你能学到什么？: 1、几何知识 2、从零学习canvas

微信扫码，参与3人拼团

热搜

最近搜索清空

Canvas 绘制时钟