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


分享名称:如何使用HTML5Canvas在网页上画一个点
标题URL:http://pwwzsj.com/article/psgees.html