极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html>
<head>
<title>钟表</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById('c')
var ctx = canvas.getContext('2d')
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSen = oDate.getSeconds();
var oHoursValue = (-90 + oHours * 30 + oMin/2 ) * Math.PI/180;
var oMinValue = (-90 + oMin * 6 ) * Math.PI/180;
var oSenValue = (-90 + oSen * 6 ) * Math.PI/180;
function toDraw(){
var x=200;
var y=200;
var r=150;
ctx.clearRect(0,0,c.width,c.height)
ctx.beginPath();
for(var i = 0; i < 60 ; i ++ ){
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke()
ctx.beginPath();
ctx.fillStyle='white'
ctx.moveTo(x,y);
ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 3 ;
ctx.beginPath();
for(var i = 0; i < 12; i ++ ){
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke()
ctx.beginPath();
ctx.fillStyle='white'
ctx.moveTo(x,y);
ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r/2,oHoursValue,oHoursValue,false)
ctx.closePath();
ctx.stroke()
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r/1.5,oMinValue,oMinValue,false)
ctx.closePath();
ctx.stroke()
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x,y,r/1.3,oSenValue,oSenValue,false)
ctx.closePath();
ctx.stroke()
};
setInterval(toDraw,1000);
toDraw()
}
</script></head>
<body>
<canvas id="c" width="500" height="500" style="border:1px solid red"></canvas></body>
</html>
html5
把这段代码放进方法里面。。。。
应该明白什么意思了吧？