如何使用HTML5 Canvas在網頁上畫一個點

這篇文章給大家分享的是有關如何使用HTML5 Canvas在網頁上畫一個點的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　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）;//旋轉

　　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（）;

　　}

　　//動態的

　　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）;

感謝各位的閱讀！關于“如何使用HTML5 Canvas在網頁上畫一個點”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！