在线闹钟html代码复制,如何使用html5时钟实现（附代码）

使用html5下实现的闹钟代码，喜欢的朋友可以参考下。

是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。

只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在>元素上绘图主要有三步：

1.获取元素对应的DOM对象，这是一个Canvas对象；

2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；

3.调用CanvasRenderingContext2D对象进行绘图。

图形变换

平移：context.translate(x,y)，接收参数分别为原点在x轴方向平移x，在y轴方向平移y。

缩放：context.scale(x,y)，接收参数分别为x坐标轴按x比例缩放，y坐标轴按y比例缩放。

旋转：context.rotate(angle)，接收参数是坐标轴旋转的角度。

需要说明的是，对图形进行变化后，接下来的一次绘图是紧接着上一次的状态的，所以如果需要回到初始状态，要用到context.save();和context.restore();来保存和恢复当前状态:

JavaScript Code复制内容到剪贴板

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();

效果如下：

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

a 水平缩放 ( 默认为1 )

b 水平倾斜 ( 默认为 0 )

c 垂直倾斜 ( 默认为 0 )

d 垂直缩放 ( 默认为1 )

e 水平位移 ( 默认为 0 )

f 垂直位移 ( 默认为 0 )

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

在线闹钟html代码复制,如何使用html5时钟实现（附代码）相关推荐

linux手写涂鸦代码,canvas实现图片涂鸦功能（附代码）
本篇文章给大家带来的内容是关于canvas实现图片涂鸦功能(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求需要对图片进行标注,导出图片. 需要标注N多图片最后同时保存. ...
【如何给iOS APP加固】之代码混淆及加密第一章【附代码】
为了给iOS app加固,我们可以采取以下几种方式: 1.代码混淆代码混淆是通过修改源代码结构和变量名,使得代码难以被理解和反编译.这可以防止黑客获取应用程序的代码,因为即使他们能够获得源代码,也会 ...
100行代码搞定实时视频人脸表情识别(附代码)
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|OpenCV学堂好就没有写点OpenCV4 + Open ...
python之穿越火线游戏代码_Python 大作业之五子棋游戏(附代码)
Python 大作业--五子棋游戏姓名:吴欣学号: 姓名:张雨清学号: 一游戏介绍: 我们设计的是五子棋游戏,支持两人一个鼠标对下,黑方用左键单击,白方用右键单击,谁先下均可,落子无悔,下过 ...
刚刚涉足神经网络，基于TensorFlow2.0以实现鸢尾花分类为例总结神经网络代码实现的几个步骤，附代码详细讲解
前言总体来看,一个简单的神经网络,在准备数据和参数定义后就已经被搭建起来了,这便是神经网络的骨架.我们后面补入的参数优化是为了让这个神经网络能够朝着我们希望的方向进行迭代,最后能获取到符合我们预期的 ...
java旋转太极图_如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
HTML JavaScript 命运石之门时间线动态时钟（附代码）
喂,站在那里的人,赐予你labmem 014的称号!Steins;Gate! 宇宙虽有其起源,却没有终结--无限.星球虽也有起源,却因其自身之力走向毁灭--有限.拥有睿智之才是最为愚蠢者,历史上不胜枚 ...
14款形态各异的超时尚HTML5时钟动画
14款超时尚的HTML5时钟动画(附源码) 时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...

在线闹钟html代码复制,如何使用html5时钟实现（附代码）

在线闹钟html代码复制,如何使用html5时钟实现（附代码）相关推荐

最新文章

热门文章