Canvas 绘制时钟_技术问答

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

Canvas 绘制时钟

                
                Silva Zhou
            Web前端工程师

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

全部评论问答未解决精华

南德隆

哭死了，照着屏幕上的代码写的，可就是不出来了，一个词一个词检查好几遍就是不知道哪错了。。。

10 3-2 Canvas绘制时钟内容

2016-12-29

宝慕林0430211

圆弧度计算公式角度*半径*2*3.14/360

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

2016-12-28

doerdoer

很好，大大的赞！！！

0 3-1 Canvas 时钟外边框圆

2016-12-27

没有出来圆的效果

最新回答 / 冰洁雪儿

你的那个 ctx.src(0,0,r,0,2*Math.PI,false)少了一个起始角度0，你在好好对比一下

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

2016-12-26

canvas画时钟

已采纳回答 / 萧十一郞

DW也是可以画的

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

2016-12-26

为什么画秒针的时候，半径是2，

最新回答 / 折翼天使I

下面这句代码的意思是划出60个实心点啊：<...code...>这里的半径是用于限定这60个圆点的大小的。

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

2016-12-24

小罗子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

首页上一页 19 20 21 22 23 24 25 下一页尾页

开始学习

课程须知: javascript基础知识

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

微信扫码，参与3人拼团

热搜

最近搜索清空