javascript 연습 canvas 시계
4158 단어 JavaScriptcanvas클 록
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas </title>
</head>
<body>
<canvas id="biaopan" width="200" height="200" style="position:absolute; left:0px; top:0px;"> </canvas>
<canvas id="miaozhen" width="200" height="200" style="position:absolute; left:0px; top:0px;"> </canvas>
<canvas id="fenzhen" width="200" height="200" style="position:absolute; left:0px; top:0px;"> </canvas>
<canvas id="shizhen" width="200" height="200" style="position:absolute; left:0px; top:0px;"> </canvas>
<script>
var biaopan = document.getElementById("biaopan");
var miaozhen = document.getElementById("miaozhen");
var fenzhen = document.getElementById("fenzhen");
var shizhen = document.getElementById("shizhen");
function x(a){
return Math.sin(2*Math.PI/360*a)
}
function y(a){
return -Math.cos(2*Math.PI/360*a)
}
//
function biaoPan(){
var contextB = biaopan.getContext("2d");
//
contextB.beginPath();
//
contextB.translate(100,100);
//
contextB.arc(0,0,99,0,2*Math.PI,false);
//
contextB.moveTo(94,0);
contextB.arc(0,0,94,0,2*Math.PI,false);
//
contextB.moveTo(1,0);
contextB.arc(0,0,1,0,2*Math.PI,false);
contextB.moveTo(2,0);
contextB.arc(0,0,2,0,2*Math.PI,false);
contextB.moveTo(3,0);
contextB.arc(0,0,3,0,2*Math.PI,false);
contextB.moveTo(4,0);
contextB.arc(0,0,4,0,2*Math.PI,false);
contextB.moveTo(5,0);
contextB.arc(0,0,5,0,2*Math.PI,false);
//
contextB.font = "bold 12px Arial";
contextB.textAlign = "center";
contextB.textBaseline = "middle";
for(var i=1; i<=12; i++){
contextB.fillText(i, x(i*30)*80, y(i*30)*80);
}
//
for(var i=1; i<=60; i++){
//
if(i%5 != 0){
contextB.moveTo(x(i*6)*79, y(i*6)*79);
contextB.lineTo(x(i*6)*81, y(i*6)*81);
}
}
//
contextB.stroke();
}
//
var mm = new Date();
var ms = mm.getHours()*3600+mm.getMinutes()*60+mm.getSeconds();
var yidu = Math.PI/180;
var rm = yidu * ms * 6;
var rf = yidu * ms/60 * 6;
var rs = yidu * ms/3600 * 30;
//
var contextM = miaozhen.getContext("2d");
//
contextM.translate(100,100);
//
contextM.rotate(rm);
function miaoZhen(){
//
contextM.globalCompositeOperation = "copy";
//
contextM.beginPath();
contextM.moveTo(0,0);
contextM.lineTo(0,-87);
contextM.lineTo(-1,-87);
contextM.lineTo(0,-92);
contextM.lineTo(1,-87);
contextM.lineTo(0,-87);
contextM.lineTo(0,10);
contextM.lineTo(-3,10);
contextM.lineTo(3,10);
//
contextM.rotate(Math.PI/30);
//
contextM.stroke();
}
//
var contextF = fenzhen.getContext("2d");
//
contextF.translate(100,100);
//
contextF.rotate(rf);
function fenZhen(){
//
contextF.globalCompositeOperation = "copy";
//
contextF.beginPath();
contextF.moveTo(0,0);
contextF.lineTo(0,-67);
contextF.lineTo(-1,-67);
contextF.lineTo(0,-72);
contextF.lineTo(1,-67);
contextF.lineTo(0,-67);
contextF.lineTo(0,10);
contextF.lineTo(-3,10);
contextF.lineTo(3,10);
//
contextF.rotate(Math.PI/1800);
//
contextF.stroke();
}
//
var contextS = shizhen.getContext("2d");
//
contextS.translate(100,100);
//
contextS.rotate(rs);
function shiZhen(){
//
contextS.globalCompositeOperation = "copy";
//
contextS.beginPath();
contextS.moveTo(0,0);
contextS.lineTo(0,-45);
contextS.lineTo(-1,-45);
contextS.lineTo(0,-50);
contextS.lineTo(1,-45);
contextS.lineTo(0,-45);
contextS.lineTo(0,10);
contextS.lineTo(-3,10);
contextS.lineTo(3,10);
//
contextS.rotate(Math.PI/21600);
//
contextS.stroke();
}
biaoPan();miaoZhen();fenZhen();shiZhen();
setInterval("miaoZhen(),fenZhen(),shiZhen()",1000);
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
