摘要:简易版时钟时钟清除画布,每次执行重新绘图,解决时钟模糊,边框有锯齿。
canvas 简易版时钟
canvas烟花粒子时钟
window.requestAnimFrame=(function(){ return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){ window.setTimeout(callback,1000/60); }; })(); var can=document.getElementById("canvas"); // can.width=document.body.clientWidth ; // can.height=document.body.clientHeight; var cw=window.innerWidth; var ch=window.innerHeight; can.width=cw ; can.height=ch; var cxt=can.getContext("2d"); var circles=[]; //存放圆形粒子池 var rects=[]; //存放正方形粒子池 var triangles=[]; //存放三角形粒子池 var i=0; var count=100; var x; //鼠标的位置 var y; /** * 圆形粒子对象 * @param {[type]} x [description] 中心点 * @param {[type]} y [description] 中心点 * @param {[type]} r [description] 半径 */ function Circle(x,y,r){ this.x=x; this.y=y; this.r=r; this.speed=Math.random()*0.5+1; //速度 this.direction=Math.random()*Math.PI*2; //方向 } /** * 更新圆心坐标 * @return {[type]} [description] */ Circle.prototype.update=function(){ this.x+=Math.cos(this.direction)*this.speed; this.y+=Math.sin(this.direction)*this.speed; if(this.x=(cw-this.r)){ this.x=cw-this.r; this.direction=Math.PI-this.direction; } if(this.y =(ch-this.r)){ this.y=ch-this.r; this.direction=-this.direction; } }; /** * 绘制圆形粒子 * @return {[type]} [description] */ Circle.prototype.draw=function(){ cxt.beginPath(); cxt.arc(this.x,this.y,this.r,0,360,false); cxt.closePath(); cxt.fillStyle="#f66"; if(this.x>x-50&&this.x y-50&&this.y /** * 矩形粒子对象 * @param {[type]} x 起点位置 * @param {[type]} y 起点位置 * @param {[type]} w 矩形宽 * @param {[type]} h 矩形长 */ function Rect(x,y,w,h){ this.x=x; this.y=y; this.w=w; this.h=h; this.x0=Math.random()*cw; //正方形的中心坐标 为了旋转而设定 this.y0=Math.random()*ch; //正方形的中心坐标 this.r=Math.sqrt(Math.pow(this.w/2,2)+Math.pow(this.h/2,2)); this.speed=Math.random()*0.5+1; //速度 this.direction=Math.random()*Math.PI*2; //方向 } /** * 更新粒子坐标 * @return {[type]} [description] */ Rect.prototype.update=function(){ this.x0+=Math.cos(this.direction)*this.speed; this.y0+=Math.sin(this.direction)*this.speed; if(this.x0cw-this.r){ this.x0=cw-this.r; this.direction=Math.PI-this.direction; } if(this.y0 ch-this.r){ this.y0=ch-this.r; this.direction=-this.direction; } }; /** * 绘制正方形粒子 * @return {[type]} [description] */ Rect.prototype.draw=function(){ cxt.save(); cxt.fillStyle="#06c"; cxt.translate(this.x0,this.y0); //将坐标原点移至圆心 方便旋转 cxt.rotate(i*Math.PI/180); cxt.beginPath(); if(this.x0>x-50&&this.x0y-50&&this.y0 /** * 等边三角形粒子 * @param {[type]} h 三角形高 * @return {[type]} [description] */ function Triangle(b){ this.b=b; this.x0=Math.random()*cw; this.y0=Math.random()*ch; this.speed=Math.random()*0.5+1; this.direction=Math.random()*Math.PI*2; this.r=this.b/2*Math.tan(30*Math.PI/180); console.log(this.r+" "+this.b); } /** * 中心更新 * @return {[type]} [description] */ Triangle.prototype.update=function(){ this.x0+=Math.cos(this.direction)*this.speed; this.y0+=Math.sin(this.direction)*this.speed; if(this.x0cw-this.r){ this.x0=cw-this.r; this.direction=Math.PI-this.direction; } if(this.y0 ch-this.r){ this.y0=ch-this.r; this.direction=-this.direction; } }; Triangle.prototype.draw=function(){ cxt.save(); cxt.fillStyle="#86c"; cxt.translate(this.x0,this.y0); cxt.rotate(i*Math.PI/180); cxt.beginPath(); cxt.moveTo(-this.b/2,-this.r); cxt.lineTo(0,Math.sin(60*Math.PI/180)*this.b-this.r); cxt.lineTo(this.b/2,-this.r); cxt.closePath(); if(this.x0>=x-50&&this.x0<=x+50&&this.y0>=y-50&&this.y0<=y+50){ cxt.globalAlpha=1; }else{ cxt.globalAlpha=0.2; } cxt.fill(); cxt.restore(); }; while(count--){ var w=Math.random()*cw; var h=Math.random()*ch; circles.push(new Circle(w,h,5)); rects.push(new Rect(-5,5,10,10)); triangles.push(new Triangle(10)); } canvas.onmousemove=function(ev){ var ev=ev||window.event; x=ev.pageX; y=ev.pageY; console.log(x+"..."+y); }; /** * 在画布中绘制圆形粒子 * @return {[type]} [description] */ function loop(){ requestAnimFrame(loop); i++; if(i>10000){ i=0; } cxt.globalCompositeOperation="destination-out"; cxt.fillStyle="rgba(0,0,0,1)"; //透明度 cxt.globalAlpha=1; cxt.fillRect(0,0,cw,ch); //显示重叠的部分 cxt.globalCompositeOperation="lighter"; var n=circles.length; while(n--){ circles[n].draw(); circles[n].update(); } var n=rects.length; while(n--){ rects[n].draw(); rects[n].update(); } var n=triangles.length; while(n--){ triangles[n].draw(); triangles[n].update(); } } window.onload=loop;
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80588.html
摘要:简易版时钟时钟清除画布,每次执行重新绘图,解决时钟模糊,边框有锯齿。 canvas 简易版时钟 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 时钟 *{ margin:0; padding:0; } bod...
摘要:时钟的实现主要是应用上下文的简单变换文本添加及周期性调用方法。在绘制表盘及时针过程注意使用及方法添加用以保存或返回上一个画布设置属性。思路编写两个构造函数,分别代表表盘和时针,最后利用函数加以实现。 写在之前 canvas 元素中提供了看似简单的绘图方法,但仔细挖掘,可以以此做出非常复杂而漂亮的图形。随着 API 的逐渐完善,我相信自己能进行更多有意思的尝试。 时钟的 canvas ...
摘要:时钟的实现主要是应用上下文的简单变换文本添加及周期性调用方法。在绘制表盘及时针过程注意使用及方法添加用以保存或返回上一个画布设置属性。思路编写两个构造函数,分别代表表盘和时针,最后利用函数加以实现。 写在之前 canvas 元素中提供了看似简单的绘图方法,但仔细挖掘,可以以此做出非常复杂而漂亮的图形。随着 API 的逐渐完善,我相信自己能进行更多有意思的尝试。 时钟的 canvas ...
阅读 2938·2021-11-25 09:43
阅读 3542·2021-11-24 11:13
阅读 3338·2021-10-14 09:42
阅读 2501·2021-09-23 11:53
阅读 3581·2021-09-22 15:57
阅读 3196·2021-09-02 09:54
阅读 3477·2019-08-30 13:47
阅读 1623·2019-08-29 16:55