丁香婷婷中文字幕,亚洲精品无码白丝喷白浆在线播放

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

使用canvas繪制超炫時鐘

來源：易賢網(wǎng) 閱讀：1461 次日期：2014-12-23 11:49:41

溫馨提示：易賢網(wǎng)小編為您整理了“使用canvas繪制超炫時鐘”,方便廣大網(wǎng)友查閱！

先上效果圖：

代碼如下:

<!DOCTYPE html>

<html>

<head>

<title>canvas鐘表</title>

body{margin:0;}

</style>

</head>

<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到這段文字，說明你的瀏覽器弱爆了！</canvas>

window.onload=draw;

function draw() {

var canvas=document.getElementById('canvas');

var context=canvas.getContext('2d');

context.save(); ///////////////////////////////////保存

context.translate(200,200);

var deg=2*Math.PI/12;

//////////////////////////////////////////////////表盤

context.save();

context.beginPath();

for(var i=0;i<13;i++){

var x=Math.sin(i*deg);

var y=-Math.cos(i*deg);

context.lineTo(x*150,y*150);

}

var c=context.createRadialGradient(0,0,0,0,0,130);

c.addColorStop(0,"#22f");

c.addColorStop(1,"#0ef")

context.fillStyle=c;

context.fill();

context.closePath();

context.restore();

//////////////////////////////////////////////////數(shù)字

context.save();

context.beginPath();

for(var i=1;i<13;i++){

var x1=Math.sin(i*deg);

var y1=-Math.cos(i*deg);

context.fillStyle="#fff";

context.font="bold 20px Calibri";

context.textAlign='center';

context.textBaseline='middle';

context.fillText(i,x1*120,y1*120);

}

context.closePath();

context.restore();

//////////////////////////////////////////////////大刻度

context.save();

context.beginPath();

for(var i=0;i<12;i++){

var x2=Math.sin(i*deg);

var y2=-Math.cos(i*deg);

context.moveTo(x2*148,y2*148);

context.lineTo(x2*135,y2*135);

}

context.strokeStyle='#fff';

context.lineWidth=4;

context.stroke();

context.closePath();

context.restore();

//////////////////////////////////////////////////小刻度

context.save();

var deg1=2*Math.PI/60;

context.beginPath();

for(var i=0;i<60;i++){

var x2=Math.sin(i*deg1);

var y2=-Math.cos(i*deg1);

context.moveTo(x2*146,y2*146);

context.lineTo(x2*140,y2*140);

}

context.strokeStyle='#fff';

context.lineWidth=2;

context.stroke();

context.closePath();

context.restore();

///////////////////////////////////////////////////文字

context.save();

context.strokeStyle="#fff";

context.font=' 34px sans-serif';

context.textAlign='center';

context.textBaseline='middle';

context.strokeText('canvas',0,65);

context.restore();

/////////////////////////////////////////////////new Date

var time=new Date();

var h=(time.getHours()%12)*2*Math.PI/12;

var m=time.getMinutes()*2*Math.PI/60;

var s=time.getSeconds()*2*Math.PI/60;</p> <p>////////////////////////////////////////////////時針

context.save();

context.rotate( h + m/12 + s/720) ;

context.beginPath();

context.moveTo(0,6);

context.lineTo(0,-85);

context.strokeStyle="#fff";

context.lineWidth=6;

context.stroke();

context.closePath();

context.restore();

//////////////////////////////////////////////分針

context.save();

context.rotate( m+s/60 ) ;

context.beginPath();

context.moveTo(0,8);

context.lineTo(0,-105);

context.strokeStyle="#fff";

context.lineWidth=4;

context.stroke();

context.closePath();

context.restore();

/////////////////////////////////////////////秒針

context.save();

context.rotate( s ) ;

context.beginPath();

context.moveTo(0,10);

context.lineTo(0,-120);

context.strokeStyle="#fff";

context.lineWidth=2;

context.stroke();

context.closePath();

context.restore();

context.restore();/////////////////////////////棧出

setTimeout(draw, 1000);/////////////////////////////計時器</p> <p>}</p> <p></script>

</body>

</html>

更多信息請查看IT技術(shù)專欄

更多信息請查看網(wǎng)頁制作

上一篇：canvas需要在標(biāo)簽里直接定義寬高

下一篇：24個canvas基礎(chǔ)知識小結(jié)

易賢網(wǎng)手機網(wǎng)站地址：使用canvas繪制超炫時鐘

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)頁制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實現(xiàn)代碼(增進用戶體驗)10月30日

html5實現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細(xì)節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼