一个简易时钟效果射流研究…实现代码

本文实例为大家分享了射流研究…时钟特效的具体代码，供大家参考，具体内容如下

射流研究…代码

var canvas=文档。getelementbyid(' clock ')；var时钟=画布。get context(' 2d ')；函数钟(){钟。save()；//开始画外层圆clock.translate(200，200)；clock.strokeStyle=' blackclock。线宽=3；时钟。begin path()；时钟弧(0,0,195,0,2 *数学. PI)；时钟。笔画()；//时钟上的数字var shuzi=[3，4，5，6，7，8，9，10，11，12，1，2]；" clock . font=' 30px Arialclock . textalign=' center clock . text baseline="中间";shuzi.forEach(函数（数字，i) { var rad=2 * Math .PI/12 * I；var x=数学。cos(rad)* 180；var y=数学。sin(弧度)* 180；clock.fillText(数字，x，y)；});//小圆点for(j=0；j 60j ) { var h=2 *数学/60 * j；var m=数学。cos(h)* 180；var n=数学。辛(h)* 180；clock.fillStyle=' blackclock。begin path()；if(j % 5===0){ continue；} clock.arc(m，n，3，0，2 * Math .PI)；时钟。fill()；} }函数drawHour(小时，分钟){时钟。save()；var rad=2 *数学PI/12 *小时；var red=2 *数学PI/12/60 *分钟；时钟。旋转(红色)；clock . line width=10 clock . line cap=' round clock。begin path()；clock.moveTo(0，5)；clock.lineTo(0，-100)；时钟。笔画()；时钟。restore()；}函数绘制最小(最小){时钟。save()；var rad=2 *数学PI/60 *分钟；时钟。旋转(rad)；时钟。线宽=5；clock.lineCap=' roundclock。begin path()；clock.moveTo(0，10)；clock.lineTo(0，-150)；时钟。笔画()；时钟。restore()；}函数drawsec(秒){时钟。save()；var rad=2 *数学PI/60 *秒；时钟。旋转(rad)；时钟。线宽=2；clock . line cap=' round clock . strokestyle=' red clock。begin path()；clock.moveTo(0，10)；clock.lineTo(0，-180)；时钟。笔画()；时钟。restore()；}函数Dian(){ clock。FillStyle=' white时钟。begin path()；时钟弧(0,0,2,0,2 *数学. PI)；时钟。fill()；}函数宣传(){ clock.clearRect(0，0，400，400)；zhong()；var now=新日期();var小时=现在。gethours()；var min=now。getminutes()；var sec=now。getseconds()；drawHour(小时，分钟);drawmin(分钟);drawsec(秒);Dian()；时钟。restore()；}宣传();setInterval(宣传，1000);以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。