摘要:簡易版時鐘時鐘清除畫布,每次執行重新繪圖,解決時鐘模糊,邊框有鋸齒。
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;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50126.html
摘要:簡易版時鐘時鐘清除畫布,每次執行重新繪圖,解決時鐘模糊,邊框有鋸齒。 canvas 簡易版時鐘 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 時鐘 *{ margin:0; padding:0; } bod...
摘要:時鐘的實現主要是應用上下文的簡單變換文本添加及周期性調用方法。在繪制表盤及時針過程注意使用及方法添加用以保存或返回上一個畫布設置屬性。思路編寫兩個構造函數,分別代表表盤和時針,最后利用函數加以實現。 寫在之前 canvas 元素中提供了看似簡單的繪圖方法,但仔細挖掘,可以以此做出非常復雜而漂亮的圖形。隨著 API 的逐漸完善,我相信自己能進行更多有意思的嘗試。 時鐘的 canvas ...
摘要:時鐘的實現主要是應用上下文的簡單變換文本添加及周期性調用方法。在繪制表盤及時針過程注意使用及方法添加用以保存或返回上一個畫布設置屬性。思路編寫兩個構造函數,分別代表表盤和時針,最后利用函數加以實現。 寫在之前 canvas 元素中提供了看似簡單的繪圖方法,但仔細挖掘,可以以此做出非常復雜而漂亮的圖形。隨著 API 的逐漸完善,我相信自己能進行更多有意思的嘗試。 時鐘的 canvas ...
閱讀 2902·2021-11-25 09:43
閱讀 2320·2021-11-24 09:39
閱讀 2708·2021-09-23 11:51
閱讀 1400·2021-09-07 10:11
閱讀 1449·2019-08-27 10:52
閱讀 1929·2019-08-26 12:13
閱讀 3356·2019-08-26 11:57
閱讀 1393·2019-08-26 11:31