如何使用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时钟实现（附代码）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

关于h5的事件属性详解

HTML5拖拽功能实现的拼图游戏

h5手机扫码怎么实现

h5微信支付之引入微信的js-sdk包失败的解决方法

如何使用canvas画出平滑的曲线?（代码）

震惊！HTML5区块链游戏联盟成立，设立10亿级发展基金！

HTML5应用-生日快乐动画的实现

h5的游戏开发详解

常用的HTML5列表标签

HTML5新增了哪些标签和属性？新增了标签和属性（总结）

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

书籍

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

￥83.86元   人民邮电出版社

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

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