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

Canvas 绘制时钟

难度中级
时长 1小时 0分
学习人数
综合评分9.73
141人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.7 逻辑清晰
我先写了一遍,发现画不出来。看了老师代码,改了也没用。最后在开头加了window.onload。画了一个椭圆,检查一下是原点和半径的问题

最赞回答 / qq_Lamaarasadne_0
<script>clock.jsvar dom = document.getElementById('clock');var ctx = dom.getContext('2d');var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;function drawBackground() { "use strict"; ctx.translate(r, r); ctx.beginPath(); c...
表示看不懂秒针的画法,请大神指导一下下。。。

最赞回答 / 任性不是罪
<...图片...>时针画法图解

最赞回答 / 任性不是罪
因为lineWidth的宽度值是以图形的边缘为基准向两边扩展的,也就是说原来的半径为r,给了一个10像素的宽度,那么新的半径(到外边)就是r+5,到内边的半径就是r-5。
老师讲的很好,辛苦了
似乎回到了初中,不过又是回顾了一番
那些东西谁还记得住呀
视频为什么那么卡?是我的网络有问题吗?

最新回答 / 雪狼湖小雪
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.rest...
学习了,收获不少
欲知后事如何?请听下回分解!

最赞回答 / 慕粉1006301048
你好,我刚刚做了一下,是正确的,可以画出圆

已采纳回答 / 慕工程0708615
得看下你的代码,在draw()函数里面的ctx.restore()之前的函数(drawSecond())里面的开始不需要ctx.save(),后面也不需要ctx.restore(),我的一开始就是因为设置秒针的函数的开头设置了个ctx.save(),右下角四分之一没了,因为你在设置秒针的开头设置一个ctx.save()会导致draw里面的清除函数的画布原点,变成秒针的原点,也就是圆的中心点,今天才刚开始学canvas,也不知道我理解的对不对,反正你可以试试
课程须知
javascript基础知识
老师告诉你能学到什么?
1、几何知识 2、从零学习canvas

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消