WEB前端开发学习----9. 使用canvas来画个时钟

canvas元素在html5中的重要性非同一般。配合JS让我们实现了在浏览器页面中作画的强大功能。不再单单依靠图片,flash等外部文件,减少http请求,从而网页加载速度更加快捷。

简单的线段:
看个小演示canvas小房子
不用函数累死人。。。。

旋转:
使用提供的rotate()方法。需要注意的是,在旋转前,应该重新定位原点。一般来说将要旋转的图像的端点重定向为原点,以此为基础来旋转。也就是说先定位,再设置旋转角度,最后画图。看个演示canvas 扇子。这样要比一道一道的画线方便许多。

用渐变色填充图像:
分为径向渐变和线性渐变,有点类似于CSS3的渐变操作。不需要再用图片来做渐变背景了。
看个演示 canvas 立体小球。

用这些方法就可以做一个时钟了,纯canvas+js,不使用图片。
查看效果 canvas时钟

完整的代码:

[html]view plain copy

  1. 时钟 - 锐客网
  2. 请更新浏览器版本
【WEB前端开发学习----9. 使用canvas来画个时钟】转载于:https://www.cnblogs.com/cdh-fw/p/4179185.html

    推荐阅读