建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)如何使用HTML5 Canvas在網(wǎng)頁上畫一個點的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,廣信企業(yè)網(wǎng)站建設,廣信品牌網(wǎng)站建設,網(wǎng)站定制,廣信網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,廣信網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
var clock=document.getElementById（"clock"）;
var ctx=clock.getContext（"2d"）;
var width= ctx.canvas.width;
var height= ctx.canvas.height;
var r=width / 2;
var rem=width / 200;
function drawBackground（）{
ctx.save（）;
//繪制一個圓
ctx.translate（r, r）;
ctx.beginPath（）;
ctx.arc（0, 0, r-5, 0, 2 * Math.PI, false）;
ctx.lineWidth =10 * rem;
ctx.stroke（）;
//繪制時鐘
var hoursArr=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font =18 * rem +'px Arial';
ctx.textAlign ='center';
ctx.textBaseline ='middle';
hoursArr.forEach（function（number,i）{
var rad=2*Math.PI / 12 * i;
var x=Math.cos（rad） * （r-28 * rem）;
var y=Math.sin（rad） * （r-28 * rem）;
ctx.fillText（number,x,y）;
}）;
//遍歷60個點，繪制時刻點點
for（var i=0; i < 60;i++）{
var rad=2*Math.PI / 60 * i;
var x=Math.cos（rad） * （r-16 * rem）;
var y=Math.sin（rad） * （r-16 * rem）;
ctx.beginPath（）;
if（i % 5==0）{
ctx.fillStyle ='#000';
ctx.arc（x,y,2 * rem,0,2*Math.PI,false）;
}else{
ctx.fillStyle ='#ccc';
ctx.arc（x,y,2 * rem,0,2*Math.PI,false）;
}
ctx.fill（）;
}
}
//繪制時針線
function drawHour（hour,minute）{
ctx.save（）;//保留
ctx.beginPath（）;
var rad=2*Math.PI / 12 * hour;
var mrad=2*Math.PI / 12 / 60 * minute;
ctx.rotate（rad+mrad）;//旋轉(zhuǎn)
ctx.moveTo（0,10 * rem）;//線條起始點
ctx.lineTo（0,-r / 2 - 20 * rem）;//線條終點
ctx.lineWidth=5 * rem;//線條寬度
ctx.lineCap='round';//線條圓角
ctx.stroke（）;
ctx.restore（）;//還原
}
//繪制分針
function drawMinute（minute,second）{
ctx.save（）;//保留
ctx.beginPath（）;
var rad=2*Math.PI / 60 * （minute + second / 60）;
ctx.rotate（rad）;
ctx.moveTo（0,10 * rem）;//線條起始點
ctx.lineTo（0,-r / 2 - 30 * rem）;//線條終點
ctx.lineWidth=3 * rem;//線條寬度
ctx.lineCap='round';//線條圓角
ctx.stroke（）;
ctx.restore（）;//還原
}
//繪制秒針
function drawSecond（second）{
ctx.save（）;
ctx.beginPath（）;
ctx.fillStyle ='#c14543';
var rad=2*Math.PI / 60 * second;
ctx.rotate（rad）;
ctx.moveTo（-2 * rem,16 * rem）;//線條起始點
ctx.lineTo（2 * rem,16 * rem）;
ctx.lineTo（1,-r + 18 * rem）;
ctx.lineTo（-1,-r + 18 * rem）;
ctx.fill（）;
ctx.restore（）;
}
//繪制中心原點
function drawDot（）{
ctx.beginPath（）;
ctx.fillStyle ='#fff';
ctx.arc（0,0,3 * rem,0,2*Math.PI,false）;
ctx.fill（）;
}
//動態(tài)的
function draw（）{
ctx.clearRect（0,0,width,height）;
var now=new Date（）;
var hour= now.getHours（）;
var minute= now.getMinutes（）;
var second= now.getSeconds（）;
drawBackground（）;
drawHour（hour,minute）;
drawMinute（minute,second）;
drawSecond（second）;
drawDot（）;
ctx.restore（）;
}
draw（）;
setInterval（draw,1000）;
感謝各位的閱讀！關(guān)于“如何使用HTML5 Canvas在網(wǎng)頁上畫一個點”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
網(wǎng)站標題：如何使用HTML5Canvas在網(wǎng)頁上畫一個點
轉(zhuǎn)載來于：http://www.dlmjj.cn/article/psgees.html
