html自动缩放,
废话不多说了，直接给大家贴代码了，具体代码如下所示：
！DOCTYPE html html lang= en head meta charset= UTF-8 title canvas _ time/title style type= text/CSS div { text-align:center；边距-顶部：250像素} #时钟{ border:1px solid # cccccc；}/style/head body div canvas id= clock height= 600 px width= 600 px /canvas/div script type= text/JavaScript var DOM=document。getelementbyid(“clock”)；var CTX=DOM。获取上下文(“2d”)；var宽度=CTX。画布。宽度；var高度=CTX。画布。身高；var r=宽度/2;var rem=宽度/200;函数绘制背景(){ CTX。save()；//存储当前环境变量；ctx.translate(r，r)；//重置坐标到CTX先生。begin path()；//起始一条路径ctx.lineWidth=10 * rem//设置线宽10;ctx.arc(0，0，r - ctx.lineWidth /2，0，2 * Math .圆周率，假);CTX。笔画()；var小时数=[3，4，5，6，7，8，9，10，11，12，1，2]；//定义数组CTX . font=18 * rem px arial CTX . textalign= center CTX . text baseline= middle hour numbers。foreach(function(number，i) { var rad=2 * Math .PI/12 * I；var x=数学。cos(拉德)*(r-30 *雷姆)；var y=数学。sin(拉德)*(r-30 *雷姆)；ctx.fillText(数字，x，y)；});for(var I=0；i 60i ) { var rad=2 *数学/60 * I；var x=数学。cos(拉德)*(r-18 *雷姆)；var y=数学。sin(rad)*(r-18 * rem)；CTX。begin path()；if (i % 5===0) { ctx.arc(x，y，2*rem，0，2 * Math .圆周率，假);CTX . fill style= # 000 } else { CTX . arc(x，y，2*rem，0，2 * Math .圆周率，假);ctx。fill()；}}函数绘图时间(小时，分钟){ CTX。save()；CTX。begin path()；var rad=2 *数学。/12 *小时；var mrad=2 *数学。/12/60 *分钟；CTX。旋转(rad mrad)；CTX . line width=6 * rem CTX . line cap= round CTX . move to(0，10 * rem)；ctx.lineTo(0，-r/2)；CTX。笔画()；CTX。restore()；}函数画分钟(分钟){ CTX。save()；CTX。begin path()；var rad=2 *数学。/60 *分钟；CTX。旋转(弧度)；CTX . line width=3 * rem CTX . line cap= round CTX . move to(0，10 * rem)；ctx.lineTo(0，-r 30 * rem)；CTX。笔画()；CTX。restore()；}函数拉丝秒(秒){ CTX。save()；CTX。begin path()；ctx.fillStyle= redvar rad=2 *数学。/60 *秒；CTX。旋转(弧度)；ctx.moveTo(-2*rem，20 * rem)；ctx.lineTo(2*rem，20 * rem)；ctx.lineTo(1，-r 16 * rem)；ctx.lineTo(-1，-r 16 * rem)；CTX。fill()；CTX。restore()；}函数画点(){ CTX。begin path()；ctx.fillStyle= # fffctx.arc(0，0，3*rem，0，2 * Math .圆周率，假);CTX。fill()；}函数draw01() { ctx.clearRect(0，0，width，height)；var now=new Date()；var hour=现在。get hours()；var分钟=现在。get minutes()；var秒=现在。获取秒数()；绘制背景()；绘图时间(小时，分钟);绘图分钟(分钟);拉丝秒(秒);画点()；CTX。restore()；} draw 01()；setInterval(draw01，1000)；/脚本/正文/html总结
以上所述是小编给大家介绍的HTML5实现可缩放时钟代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。