canvas教程

Canvas钟表

字号+ 作者:H5之家 来源:H5之家 2017-01-10 09:01 我要评论( )

html代码效果预览!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF - 8titlecanvas时钟/titlestyle*{padding:0;margin:...

html 代码效果预览

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 时钟</title> <style> * { padding: 0; margin: 0; } body { background: #ccc; } #c { background: #fff; } </style> </head> <script> window.onload = function () { var oC = document.getElementById('c'); var oC1 = oC.getContext('2d'); /* oC1.moveTo(200,200); arc(x,y,半径,起始弧度,结束弧度,旋转方向) 弧度 = 角度 * Math.PI / 180; oC1.arc(200,200,150,0,45*Math.PI/180,false); oC1.stroke(); oC1.moveTo(x,y); oC1.arc(x,y,r,0,6*Math.PI/180,false); oC1.moveTo(x,y); oC1.arc(x,y,r,6,12*Math.PI/180,false); */ setInterval(toDraw,1000) toDraw() function toDraw() { var x = 200; // x轴坐标 var y = 200; // y轴坐标 var r = 150; // r 半径 // 清空画布 oC1.clearRect(0,0,oC.width,oC.height) // 获取时间 var oDate = new Date(); var oHours = oDate.getHours(); //时 var oMin = oDate.getMinutes(); //分 var oSen = oDate.getSeconds(); //秒 var oHoursVal = (oHours*30 - 90 + oMin/2) * Math.PI/180; var oMinVal = ( oMin*6 - 90) * Math.PI/180; var oSenVal = ( oSen*6 - 90) * Math.PI/180; // 绘制秒针表盘 oC1.beginPath(); for( var i = 0; i<60; i++ ){ oC1.moveTo(x,y); oC1.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } oC1.closePath(); oC1.stroke(); // 绘制大圆盘 (覆盖) oC1.fillStyle = "#fff"; oC1.beginPath(); oC1.moveTo(x,y); oC1.arc(x,y,r*0.95,0,360*Math.PI/180,false); oC1.closePath(); oC1.fill(); // 绘制分针表盘 oC1.lineWidth = 3; oC1.beginPath(); for( var i = 0; i<12; i++ ){ oC1.moveTo(x,y); oC1.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); } oC1.closePath(); oC1.stroke(); // 绘制大圆盘 (覆盖) oC1.fillStyle = "#fff"; oC1.beginPath(); oC1.moveTo(x,y); oC1.arc(x,y,r*0.9,0,360*Math.PI/180,false); oC1.closePath(); oC1.fill(); // 绘制时针 oC1.lineWidth = 5; oC1.beginPath(); oC1.moveTo(x,y); oC1.arc(x,y,r*0.5,oHoursVal,oHoursVal,false); oC1.closePath(); oC1.stroke(); // 绘制分针 oC1.lineWidth = 3; oC1.beginPath(); oC1.moveTo(x,y); oC1.arc(x,y,r*0.7,oMinVal,oMinVal,false); oC1.closePath(); oC1.stroke(); // 绘制秒针 oC1.lineWidth = 1; oC1.beginPath(); oC1.moveTo(x,y); oC1.arc(x,y,r*0.8,oSenVal,oSenVal,false); oC1.closePath(); oC1.stroke(); // 中心点 // 绘制大圆盘 (覆盖) oC1.fillStyle = "red"; oC1.beginPath(); oC1.moveTo(x,y); oC1.arc(x,y,r*0.05,0,360*Math.PI/180,false); oC1.closePath(); oC1.fill(); } } </script> <body> <canvas id="c" height="400" width="400"></canvas> </body> </html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

    【网盘资源】《HTML5 Canvas核心技术图形动画与游戏开发》.((美)

    2017-01-10 10:00

  • 小白上学のcanvas零基础

    小白上学のcanvas零基础

    2017-01-09 15:00

  • Html canvas的width、height与在style中设置宽高的区别

    Html canvas的width、height与在style中设置宽高的区别

    2017-01-09 14:39

  • html2canvas问题

    html2canvas问题

    2017-01-07 18:02

网友点评