canvas離屏 旋轉效果實踐 旋轉的雪花

效果展示

理論基礎——「常見的canvas優化——模糊問題、旋轉效果」

1、封裝畫線函式

function drawline(ctx,x1,y1,x2,y2,color)

function canvassinglesnow(snowsize)

return singlesnow;
}

另外這裡for迴圈中用到了canvas的旋轉效果，所以我們可以很輕易的畫出6條有角度的線。效果如下圖所示

3、畫出完整的雪花

function drawcanvassnow(centersnow)

return canvassnow;
}

1、封裝乙個根據旋轉載入離屏canvas的函式

//r為雪花圖案中心距畫布中心的距離

//angle為雪花圖案在畫布上的安放角度
//size為雪花圖案的顯示尺寸
function drawsnowangle(ctx,r,angle,size)

//center為實際顯示canvas的畫布中心(半徑)

//rsnow為雪花圖案的半徑
drawsnowangle(ctx, center - rsnow, i/snownum, rsnow * 2);

var snownum = 1;

var isadd = true;
var loop = setinterval('drawcanvas()', 10);//定時器，每10ms繪製一次
function drawcanvas()//最大個數為18
else if(snownum <= 1)//最小個數為1
if(isadd)//達到最大後開始遞減
else//達到最少後開始遞增
//畫圖
var rsnow = center/2 * (snownum - 6)/6;//設定雪花圖案顯示尺寸
canvassnow = drawcanvassnow(rsnow);//畫出離屏雪花圖案
ctx.clearrect(-center, -center, center * 2, center * 2);//清除畫布
for(var i = 0; i < snownum; i++)
}

截圖效果實現

markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題，將某些文字標記為粗體或者斜體，建立乙個鏈結等，詳細語法參考幫助？本編輯器支援markdown extra,擴充套件了很多好用的功能。具體請參考...

canvas效能優化 離屏渲染

為了使使用者達到更好的體驗，做動畫的時候都知道用requestanimationframe了，但是他也是有極限的，當繪製的東西足夠多或者複雜的時候，頻繁的刪除與重繪降低了很多效能。在canvas中粒子系統應該算是比較常見的一種了，現在建立乙個canvas畫布，並繪製100個粒子在整個畫布上由上至下做...

到底什麼是離屏canvas，怎麼使用它

我們都知道在canvas中繪製相關資料是會顯示出來的。但是離屏canvas並不會。不管你在上面做上面操作都不會顯示出來。需要呼叫顯示在當前非離屏canvas上才會顯示 canvas繪製本身就是不斷的更新幀從而達到動畫的效果。離屏canvas本身可以說就是一樣。你在建立好的canvas上調取離屏can...