如何使用HTML5Canvas在网页上画一个点

这篇文章给大家分享的是有关如何使用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在网页上画一个点”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！