好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-canvas之特丑时钟

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

感觉是不是特想送钟,老是编写些时钟的效果,今日就发个丑丑的时钟,老实说

有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~

(┬_┬)

代码:

 < ;m eta charset="UTF-8"> <t IT le>Document</title> <style>     body{         background:  # eee;     }     canvas{         background: #fff;     } </style>     <canvas width="800" h ei ght="800">你浏览器不支持,请升级 .. .</canvas> </audio>

这个钟重点不在怎么画,在三角函数,三角函数的使用与角度息息相关,Math.PI是π,Math.sin(),Math.cos()它们都是接受弧度的,所以要

把角度转换成弧度,在画钟前要先判断时钟的条件,把 圆 分成60份,每一份代表一个刻度,还有在圆的坐标是数学里的正 方向 为准的,所以

需要把 开始 坐标调一下,减个90度就可以和时钟的开始位置一样了。

在学canvas前一定要把以前遗忘的数学函数复习复习一下,不是一些复杂的算数就无法做了,canvas的学习就是坐标的 不断 确认的,然后连成线

最后画成图,这与数学里的点到线,线到面一样的道理。

上面的代码不难都是使用线条画的,就是重复的使用画线函数和填充颜色。噢~还有外加了一个声频标签使用,达到时钟的 声音 滴答滴答滴答~

&nbs p;

感觉是不是特想送钟,老是编写些时钟的效果,今日就发个丑丑的时钟,老实说

有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~

(┬_┬)

代码:

 <meta charset="UTF-8"> <title>Document</title> <style>     body{         background: #eee;     }     canvas{         background: #fff;     } </style>     <canvas width="800" height="800">你浏览器不支持,请升级...</canvas> </audio>

这个钟重点不在怎么画,在三角函数,三角函数的使用与角度息息相关,Math.PI是π,Math.sin(),Math.cos()它们都是接受弧度的,所以要

把角度转换成弧度,在画钟前要先判断时钟的条件,把圆分成60份,每一份代表一个刻度,还有在圆的坐标是数学里的正方向为准的,所以

需要把开始坐标调一下,减个90度就可以和时钟的开始位置一样了。

在学canvas前一定要把以前遗忘的数学函数复习复习一下,不是一些复杂的算数就无法做了,canvas的学习就是坐标的不断确认的,然后连成线

最后画成图,这与数学里的点到线,线到面一样的道理。

上面的代码不难都是使用线条画的,就是重复的使用画线函数和填充颜色。噢~还有外加了一个声频标签使用,达到时钟的声音 滴答滴答滴答~

 

觉得 可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-canvas之特丑时钟 全部内容,希望文章能够帮你解决 html5教程-canvas之特丑时钟 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-canvas之特丑时钟的详细内容...

  阅读:43次