????
????canvas繪制時(shí)鐘
????
????????你的瀏覽器不支持canvas，請(qǐng)更換瀏覽器!
????
????
????????????(()?{
????????????????=.();
????????????????=.();
????????????????.=;
????????????????.=;
????????????????=.;
????????????????=.;
????????????????=/;
????????????()?{
????????????????.();
????????????????.(,);
????????????????.=;
????????????????.(,,-,,*.);
????????????????.();
????????????????.();
????????????????=[,,,,,,,,,,,];
????????????????(=;<.;++)
????????????????{
????????????????????.=;
????????????????????.=;
????????????????????.=;
????????????????????=*./*;
????????????????????=(-)*.();
????????????????????=(-)*.();
????????????????????.([],,);
????????????????}
????????????????(=;<;++)
????????????????{
????????????????????=*./*;
????????????????????=(-)*.();
????????????????????=(-)*.();
????????????????????.();
????????????????????(%===)
????????????????????{
????????????????????????.=;
????????????????????????.(,,,,*.);
????????????????????}
???????????????????????????????????????{
????????????????????????.=;
????????????????????????.(,,,,*.);
????????????????????}
????????????????????.();
????????????????}
????????????}
?????????????()?{
????????????????????.();
????????????????????.=;
????????????????????.(,,,,*.);
????????????????????.();
????????????????}
????????????(hour,minute)?{
????????????????.();
????????????????.();
????????????????=*./*hour+*.//*minute;
????????????????.();
????????????????.=;
????????????????.=;
????????????????.(,);
????????????????.(,-/);
????????????????.();
????????????????.();
????????????}
????????????????(minute)?{
????????????????????.();
????????????????????.();
????????????????????=*./*minute;
????????????????????.();
????????????????????.=;
????????????????????.=;
????????????????????.(,);
????????????????????.(,-+);
????????????????????.();
????????????????????.();
????????????????}
????????????????(second)?{
????????????????????.();
????????????????????.();
????????????????????.=;
????????????????????=*./*second;
????????????????????.();
????????????????????.(,);
????????????????????.(-,);
????????????????????.(-,-+);
????????????????????.(,-+);
????????????????????.();
????????????????????.();
????????????????}
????????????????()?{
????????????????????.(,,,);
????????????????????=Date();
????????????????????=.();
????????????????????=.();
????????????????????=.();
????????????????????();
????????????????????(,);
????????????????????();
????????????????????();
????????????????????();
????????????????????.();
????????????????}
????????????????();
????????????(,);
????????})();
3 回答
maolaixin
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>canvas繪制時(shí)鐘</title>
</head>
<body>
? ? <canvas id="demo">
? ? ? ? 你的瀏覽器不支持canvas，請(qǐng)更換瀏覽器!
? ? </canvas>
? ? <script>
? ? ? ? ? ? (function () {
? ? ? ? ? ? ? ? var canvas=document.getElementById("demo");
? ? ? ? ? ? ? ? var ctx=canvas.getContext("2d");
? ? ? ? ? ? ? ? canvas.height=600;
? ? ? ? ? ? ? ? canvas.width=600;
? ? ? ? ? ? ? ? var w=canvas.width;
? ? ? ? ? ? ? ? var h=canvas.height;
? ? ? ? ? ? ? ? var r=w/2;
? ? ? ? ? ? function drawBackgroud() {
? ? ? ? ? ? ? ? ctx.save();
? ? ? ? ? ? ? ? ctx.translate(r,r);
? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ctx.lineWidth=15;
? ? ? ? ? ? ? ? ctx.arc(0,0,r-15,0,2*Math.PI);
? ? ? ? ? ? ? ? ctx.closePath();
? ? ? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? ? ? var hoursNumber=[3,4,5,6,7,8,9,10,11,12,1,2];
? ? ? ? ? ? ? ? for (var i=0;i<hoursNumber.length;i++)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ctx.font="35px Arial";
? ? ? ? ? ? ? ? ? ? ctx.textAlign="center";
? ? ? ? ? ? ? ? ? ? ctx.textBaseline="middle";
? ? ? ? ? ? ? ? ? ? var rad=2*Math.PI/12*i;
? ? ? ? ? ? ? ? ? ? var x=(r-60)*Math.cos(rad);
? ? ? ? ? ? ? ? ? ? var y=(r-60)*Math.sin(rad);
? ? ? ? ? ? ? ? ? ? ctx.fillText(hoursNumber[i],x,y);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? for (var i=0;i<60;i++)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? var rad=2*Math.PI/60*i;
? ? ? ? ? ? ? ? ? ? var x=(r-35)*Math.cos(rad);
? ? ? ? ? ? ? ? ? ? var y=(r-35)*Math.sin(rad);
? ? ? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ? ? if (i%5===0)
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ctx.fillStyle="#000";
? ? ? ? ? ? ? ? ? ? ? ? ctx.arc(x,y,5,0,2*Math.PI);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ctx.fillStyle="#ccc";
? ? ? ? ? ? ? ? ? ? ? ? ctx.arc(x,y,5,0,2*Math.PI);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ctx.fill();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //繪制時(shí)針、分針、秒針
? ? ? ? ? ? function drawDot() {
? ? ? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ? ? ctx.fillStyle="#fff";
? ? ? ? ? ? ? ? ? ? ctx.arc(0,0,5,0,2*Math.PI);
? ? ? ? ? ? ? ? ? ? ctx.fill();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? function drawHour(hour,minute) {
? ? ? ? ? ? ? ? ctx.save();
? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute;
? ? ? ? ? ? ? ? ctx.rotate(rad);
? ? ? ? ? ? ? ? ctx.lineWidth=10;
? ? ? ? ? ? ? ? ctx.lineCap="round";
? ? ? ? ? ? ? ? ctx.moveTo(0,20);
? ? ? ? ? ? ? ? ctx.lineTo(0,-r/2);
? ? ? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? ? ? ctx.restore();
? ? ? ? ? ? }
? ? ? ? ? ? ? ? function drawMinute(minute) {
? ? ? ? ? ? ? ? ? ? ctx.save();
? ? ? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ? ? var rad=2*Math.PI/60*minute;
? ? ? ? ? ? ? ? ? ? ctx.rotate(rad);
? ? ? ? ? ? ? ? ? ? ctx.lineWidth=5;
? ? ? ? ? ? ? ? ? ? ctx.lineCap="round";
? ? ? ? ? ? ? ? ? ? ctx.moveTo(0,20);
? ? ? ? ? ? ? ? ? ? ctx.lineTo(0,-r+60);
? ? ? ? ? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? ? ? ? ? ctx.restore();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? function drawSecond(second) {
? ? ? ? ? ? ? ? ? ? ctx.save();
? ? ? ? ? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ? ? ? ? ctx.fillStyle="red";
? ? ? ? ? ? ? ? ? ? var rad=2*Math.PI/60*second;
? ? ? ? ? ? ? ? ? ? ctx.rotate(rad);
? ? ? ? ? ? ? ? ? ? ctx.moveTo(2,20);
? ? ? ? ? ? ? ? ? ? ctx.lineTo(-2,20);
? ? ? ? ? ? ? ? ? ? ctx.lineTo(-1,-r+40);
? ? ? ? ? ? ? ? ? ? ctx.lineTo(1,-r+40);
? ? ? ? ? ? ? ? ? ? ctx.fill();
? ? ? ? ? ? ? ? ? ? ctx.restore();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? function draw() {
? ? ? ? ? ? ? ? ? ? ctx.clearRect(0,0,w,h);
? ? ? ? ? ? ? ? ? ? var now=new Date();
? ? ? ? ? ? ? ? ? ? var hour=now.getHours();
? ? ? ? ? ? ? ? ? ? var minute=now.getMinutes();
? ? ? ? ? ? ? ? ? ? var second=now.getSeconds();
? ? ? ? ? ? ? ? ? ? drawBackgroud();
? ? ? ? ? ? ? ? ? ? drawHour(hour,minute);
? ? ? ? ? ? ? ? ? ? drawMinute(minute);
? ? ? ? ? ? ? ? ? ? drawSecond(second);
? ? ? ? ? ? ? ? ? ? drawDot();
? ? ? ? ? ? ? ? ? ? ctx.restore();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? draw();
? ? ? ? ? ? setInterval(draw,1000);
? ? ? ? })();
? ? </script>
</body>
</html>
西蘭花偉大炮
TA貢獻(xiàn)376條經(jīng)驗(yàn) 獲得超318個(gè)贊
你這是亂碼的，你看看我的找找問(wèn)題吧
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>畫(huà)一個(gè)時(shí)鐘</title>
????<style>
????????#canvas{
????????????margin:200px?auto;
????????????border:?1px?solid?#e9e0b5;
????????????display:?block;
????????}
????</style>
</head>
<body>
<canvas?id="canvas"?height="300px"?width="300px"></canvas>
<script>
????var?canvas?=?document.getElementById("canvas");
????var?ctx?=?canvas.getContext("2d");
????var?width?=?ctx.canvas.width;
????var?height?=?ctx.canvas.height;
????var?r?=?width?/2;
/*canvas繪制環(huán)境*/
????function?drawBackGround(ctx){
????????/*繪制圓框，60點(diǎn)，數(shù)字*/
????????ctx.save();
????????ctx.translate(r,r);
????????ctx.beginPath();
????????ctx.arc(0,0,r-5,0,Math.PI?*?2);
????????ctx.lineWidth?=?10;
????????ctx.stroke();
????????ctx.closePath();
????????ctx.font?=?"18px?Arial";
????????ctx.textBaseline?=?"middle";
????????ctx.textAlign?=?"center";
????????var?hoursNumber?=?[3,4,5,6,7,8,9,10,11,12,1,2];
????????/*傳入的number為數(shù)組值，i為數(shù)組索引*/
????????hoursNumber.forEach(function?(number,i)?{
????????????var?rad?=?2?*?Math.PI?/?12?*?i;
????????????var?x?=?Math.cos(rad)?*?(r?-?30);
????????????/*cos與sin傳入的是弧度值，包括rotate也是弧度，但是css中為deg*/
????????????var?y?=?Math.sin(rad)?*?(r?-?30);
????????????ctx.fillText(number,x,y);
????????});
????????for(var?i=?0;i?<?60;i++){
????????????var?radDot?=?2?*?Math.PI?/?60?*?i;
????????????var?x?=?Math.cos(radDot)?*?(r?-?18);
????????????var?y?=?Math.sin(radDot)?*?(r?-?18);
????????????ctx.beginPath();
????????????if(i?%?5?===?0){
???????????????????ctx.arc(x,y,2,0,Math.PI?*2);
????????????????????ctx.fillStyle?=?"#000";
????????????}else
????????????{
????????????????????ctx.arc(x,y,2,0,Math.PI?*2);
???????????????????ctx.fillStyle?=?"gray";
????????????}
????????????ctx.fill();
????????}
????}
????function?drawHour(hour,minnue){
????????ctx.save();
????????ctx.beginPath();
????????var?rad?=?Math.PI?*?2?/?12?*hour;
????????var?mrad?=?Math.PI?*?2?/?12?/?60?*?minnue;
????????/*分針會(huì)導(dǎo)致時(shí)針的運(yùn)動(dòng)，需要加上分針引起的弧度，每分鐘會(huì)導(dǎo)致時(shí)針變化的弧度*/
????????ctx.rotate(rad?+?mrad);
????????ctx.moveTo(0,10);
????????ctx.lineTo(0,-r?+?48);
????????ctx.lineCap?=?"round";
????????ctx.lineWidth?=?6;
????????ctx.stroke();
????????ctx.restore();
????}
????function?drawMinute(minute){
????????ctx.save();
????????ctx.beginPath();
????????var?rad?=?Math.PI?*?2?/?60?*?minute;
????????ctx.rotate(rad);
????????ctx.moveTo(0,10);
????????ctx.lineTo(0,-r?+?36);
????????ctx.lineCap?=?"round";
????????ctx.lineWidth?=?3;
????????ctx.stroke();
????????ctx.restore();
????};
????function?drawSecond(second)?{
????????ctx.save();
????????ctx.beginPath();
????????ctx.fillStyle?=?'red';
????????var?rad?=?2?*?Math.PI?/?60?*?second;
????????ctx.rotate(rad);
????????ctx.lineCap?=?'round'
????????ctx.moveTo(2,?10);
????????ctx.lineTo(-2,?10)
????????ctx.lineTo(-1,?-r?+?18);
????????ctx.lineTo(1,-r+18);
????????ctx.fill();
????????ctx.restore();
????????/*繪制秒針時(shí)要順著一個(gè)方向?qū)Ⅻc(diǎn)連接起來(lái)，不要交叉，不然會(huì)斷成兩截*/
????}
????function?drawDot(){
????????ctx.beginPath();
????????ctx.fillStyle?=?"#fff";
????????ctx.arc(0,0,3,0,Math.PI?*?2);
????????ctx.fill();
????????/*中間的白點(diǎn)*/
????}
????function?draw(){
????????ctx.clearRect(0,0,width,height);
????????/*每秒進(jìn)行一次重繪*/
????????var?now?=?new?Date();
????????var?hour?=?now.getHours();
????????var?minute?=?now.getMinutes();
????????var?second?=?now.getSeconds();
????????drawBackGround(ctx);
????????drawHour(hour,minute);
????????drawMinute(minute);
????????drawSecond(second);
????????drawDot();
????????ctx.restore()
????}
????draw();
????setInterval(draw,1000);
</script>
</body>
</html>- 3 回答
- 0 關(guān)注
- 1419 瀏覽
添加回答
舉報(bào)
0/150
提交
取消