为了账号安全,请及时绑定邮箱和手机立即绑定

Canvas 绘制时钟

难度中级
时长 1小时 0分
学习人数
综合评分9.73
141人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.7 逻辑清晰

最新回答 / FindYouL
这是四个点,下面(横坐标是-2到2)宽一点,上面(横坐标是-1到1)窄一点,填充过后就形成了类似三角形的秒针

最新回答 / 不忘初心__
按F12打开浏览器的开发者工具,就能看到报错,你把“Math”写成“Matn”了

最新回答 / 奔跑的兔子0
浏览器不支持吧,我这里可以正常显示画框

最新回答 / 慕斯8234454
原点跟css 一样在左上角因此往右往下为正,往左往上为负

最新回答 / 咪了个喵cc
已解决,是我的js文件第三行代码没有正确获取到dom的上下文,写成了document

最新回答 / 慕斯8234454
像素,原canvas框宽高为200px,圆半径r 为100px,要减去外圆10px,以及时针要短一点所以r 减去30整点数字的x位置 = Math.cos(rad)*(r-30); y位置 = Math.sin(rad)*(r-30); rad的设置 var rad = 2*Math.PI /12 * i; 因程式不接受角度,只接受弧度,因此每个整点的弧度为 2 pi /12 ==>每个整点弧度  * i (顺序从3开始)function(number,i) , number 指 var hourN...

最赞回答 / 慕粉1407216320
了解下 Array.forEach() 

最新回答 / qq_慕设计5352929
宽度好像可以直接写 var width = canvas.width;  不用那么麻烦

最赞回答 / 洞天
转动的中心是坐标零点,在旋转之前,需要将圆点设置好。用ctv.translate(x,y)设置

最新回答 / 歐炳傑
浏览器的执行顺序是从上到下加载解析的,放在head的js文件会比body中的html元素优先执行,此时canvas元素还未被浏览器解析渲染出来,所以没有效果可以在将代码放在 window.onload = function () {    // 具体代码}中,这样就能保证js文件先执行也能渲染出时钟

最新回答 / qq_慕设计5352929
是将整个画布清空再重新画出的,0,0是从这个矩形的x,y轴坐标都为零的点,也就是左上角开始清空整个画布,因为之前设置的背景之类的已经保存过 所以每次清空重画的就是秒针分针时针clearRect(x,y,width,height)这四个是必选的参数
首页上一页1234567下一页尾页
课程须知
javascript基础知识
老师告诉你能学到什么?
1、几何知识 2、从零学习canvas

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消