如何使用html5时钟实现（附代码）

当前第2页 返回上一页

1. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   var canvas = document.getElementById("canvas");   var context = canvas.getContext("2d");   //translate() context.save();   context.fillStyle = "#1424DE";   context.translate(10,10);   context.fillRect(0,0,200,200);   context.restore();   //scale() context.save();   context.fillStyle = "#F5270B";   context.scale(0.5,0.5);   context.fillRect(500,50,200,200);   context.restore();   //rotate() context.save();   context.fillStyle = "#18EB0F";   context.rotate(Math.PI / 4);   context.fillRect(300,10,200,200);   context.restore();

效果如下：

如何使用html5时钟实现（附代码）" alt="如何使用html5时钟实现（附代码）">

另外一个跟图形变换相关的是：矩阵变换 ：context.transform(a, b, c, d, e, f, g)。参数的含义如下：

a 水平缩放 ( 默认为1 )
b 水平倾斜 ( 默认为 0 )
c 垂直倾斜 ( 默认为 0 )
d 垂直缩放 ( 默认为1 )
e 水平位移 ( 默认为 0 )
f 垂直位移 ( 默认为 0 )

读者可以自行验证其各个参数的效果，这里就不一一介绍了。

以上就是如何使用html5时钟实现（附代码）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

HTML5 canvas基本绘图之绘制矩形

HTML5 video标签的属性、方法和事件汇总介绍

HTML5和web前端的区别是什么

一定要注意常见的3种HTML5错误用法

HTML5特殊符号怎么显示

h5中app监听返回事件处理

基于HTML5陀螺仪实现移动动画效果

h5新特性及网页布局实例

vue面试题的介绍（附答案）

介绍下HTML5.1里的新内容

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元   人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 如何使用html5时钟实现（附代码）