各位老鐵們好，相信很多人對fillrect方法都不是特別的了解，因此呢，今天就來為大家分享下關于fillrect方法以及node canvas如何提高作圖性能的問題知識，還望可以幫助大家，解決大家的一些困惑，下面一起來看看吧！
flash怎么移動
在Flash中，移動對象的常用方法是使用“Tween”類或“MotionTween”動畫。以下是兩種方法的詳細說明：
1.使用Tween類
使用Tween類可以非常容易地移動一個對象。Tween類可以讓您指定對象的起始位置和結束位置、移動時間、緩動類型等參數。下面是一些示例代碼，展示如何使用Tween類移動一個MovieClip對象：
```
importfl.transitions.Tween;
importfl.transitions.easing.*;
//創建一個Tween對象
varmyTween:Tween=newTween(myMovieClip,"x",Regular.easeInOut,0,200,2,true);
//參數解釋：
//第一個參數：需要移動的對象
//第二個參數：需要移動的屬性（這里是x坐標）
//第三個參數：緩動類型（這里使用了Regular.easeInOut，也可以選擇其他類型）
//第四個參數：起始位置（這里是0）
//第五個參數：結束位置（這里是200）
//第六個參數：移動時間（單位為秒，這里是2秒）
//第七個參數：是否重復移動（這里是true，表示循環移動）
上面的代碼將會使myMovieClip對象從左邊移動到右邊，然后返回原來的位置。
2.使用MotionTween動畫
MotionTween動畫是Flash中的一種基本動畫類型，可以用來移動和變換圖形對象。使用MotionTween動畫非常簡單，只需在Flash舞臺上選擇一個圖形對象，然后按下F8鍵將其轉換為“動畫”類型，然后單擊、拖動和縮放對象來創建動畫幀。下面是一些示例代碼，展示如何使用MotionTween動畫移動一個MovieClip對象：
//將myMovieClip對象轉換為動畫類型
myMovieClip.gotoAndStop(1);
myMovieClip.graphics.beginFill(0xff0000);
myMovieClip.graphics.drawRect(0,0,50,50);
myMovieClip.graphics.endFill();
myMovieClip.transform.colorTransform=newColorTransform(1,1,1,1,255,255,255,0);
//在動畫時間軸上選擇第1幀和第2幀，設置運動路徑
myMovieClip.gotoAndStop(1);
myMovieClip.x=0;
myMovieClip.gotoAndStop(2);
myMovieClip.x=200;
上面的代碼將會使myMovieClip對象從左邊移動到右邊，然后返回原來的位置。注意，在這種情況下，您需要在Flash中創建一個動畫時間軸，并手動設置對象的運動路徑和持續時間。
node canvas如何提高作圖性能
提高畫圖的性能，你需要了解以下幾點：
1、預渲染
錯誤代碼：
varcanvas=document.getElementById("myCanvas");
varcontext=this.canvas.getContext('2d');
vardrawAsync=eval(Jscex.compile("async",function(){
while(true){
drawMario(context);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
正確代碼：
varcanvas=document.getElementById("myCanvas");
varcontext=this.canvas.getContext('2d');
varm_canvas=document.createElement('canvas');
m_canvas.width=64;
m_canvas.height=64;
varm_context=m_canvas.getContext('2d');
drawMario(m_context);
vardrawAsync=eval(Jscex.compile("async",function(){
while(true){
context.drawImage(m_canvas,0,0);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
2、盡量少調用canvasAPI
錯誤代碼：
for(vari=0;i<points.length-1;i++){
varp1=points[i];
varp2=points[i+1];
context.beginPath();
context.moveTo(p1.x,p1.y);
context.lineTo(p2.x,p2.y);
context.stroke();
}
正確代碼：
context.beginPath();
for(vari=0;i<points.length-1;i++){
varp1=points[i];
varp2=points[i+1];
context.moveTo(p1.x,p1.y);
context.lineTo(p2.x,p2.y);
}
context.stroke();
3、盡量少改變canvas的狀態
錯誤代碼：
for(vari=0;i<STRIPES;i++){
context.fillStyle=(i%2?COLOR1:COLOR2);
context.fillRect(i*GAP,0,GAP,480);
}
正確代碼：
context.fillStyle=COLOR1;
for(vari=0;i<STRIPES/2;i++){
context.fillRect((i*2)*GAP,0,GAP,480);
}
context.fillStyle=COLOR2;
for(vari=0;i<STRIPES/2;i++){
context.fillRect((i*2+1)*GAP,0,GAP,480);
}
4、重新渲染的范圍盡量小
錯誤代碼：
context.fillRect(0,0,canvas.width,canvas.height);正確代碼：
context.fillRect(20,20,100,100);5、復雜場景使用多層畫布
<canvaswidth="600"height="400"style="position:absolute;z-index:0">
</canvas>
<canvaswidth="600"height="400"style="position:absolute;z-index:1">
</canvas>
6、不要使用陰影
context.shadowOffsetX=5;
context.shadowOffsetY=5;
context.shadowBlur=4;
context.shadowColor='rgba(255,0,0,0.5)';
context.fillRect(20,20,150,100);
7、清除畫布
一般情況下：clearRect的性能優于fillRect優于canvas.width=canvas.width;
8、像素級別操作盡量用整數
9、使用Jscex制作動畫效果
vardrawAsync=eval(Jscex.compile("async",function(){
while(true){
context.drawImage(m_canvas,0,0);
$await(Jscex.Async.sleep(1000));
}
}))
drawAsync().start();
10、其它
與渲染無關的計算交給worker，復雜的計算交給引擎（自己寫，或者用開源的），比如3D、物理。緩存load好的圖片，canvas上畫canvas,而不是畫image。
自己多積累經驗，使程序運行的消耗減少到最小就好的。
OK，關于fillrect方法和node canvas如何提高作圖性能的內容到此結束了，希望對大家有所幫助。
