前一篇大概介紹了canvas繪圖的一些基礎api，本文來介紹動畫的部分，canvas最關鍵的函式是requestanimationframe(callback)。
這是乙個用於製作逐幀動畫的函式，在它出現之前，我們的動畫基本用settimeout或者setinterval製作。
我們可以嘗試宣告乙個animate函式：
//這個函式會在控制台無限輸出"dkplus-canvas"
(function animate() )();
可以看到animate()裡面的操作在無限執行，而我們用canvas繪製動畫也可以選擇這樣的思路，無限重新整理畫布，無限繪製畫布。
ctx.arc(100,100,40,0,math.pi*2,false);
ctx.stroke();
(function animate() )();
這段**畫出來的圓和只畫一次的圓是有區別的，明顯很多個圓疊加在一起了。
我們試著改一改**：
//初始化座標
var x = 100;
var y = 100;
(function animate() )();
和fillrect()，strokerect()引數一樣，clearrect(x座標,y座標,寬度,高度)：
var x = 100;
var y = 100;
(function animate() )();
儲存開啟瀏覽器，效果確實不一樣了，看到的是乙個圓圈在運動。
但是這個圓圈只會斜向下走，我們得做一些判斷，讓它**回來。比如說當圓心+半徑超出瀏覽器邊界時，我們把x+=1變為x+= -1。這裡的1其實代表著速度，我們可以把速度儲存到乙個變數裡，方便修改。
//我把引數都設為變數
var x = 100;
var y = 100;
var dx = 6;
var dy = 6;
var radius = 40;
(function animate()
if (y+radius>innerheight || y-radius<0)
x += dx;
y += dy;
})();
//半徑暫且不設隨機，以後有用
var x = math.random()*innerwidth;
var y = math.random()*innerheight;
var dx = math.random()*5;
var dy = math.random()*5;
var radius = math.random()*40;
})();
本人對物件導向這塊不太熟，可能說的不太好請見諒好，現在我們宣告乙個function為circle，假裝我們有乙個circle類，把這些變數傳進去，同時把我們剛才用於繪圖的、用於重新整理的**都填進去。
var x = math.random()*innerwidth;
var y = math.random()*innerheight;
var dx = math.random()*5;
var dy = math.random()*5;
var radius = 40;
//這是乙個circle物件
function circle(x,y,dx,dy,radius)
//這是重新整理方法
this.update = function ()
if (y+radius>innerheight || y-radius<0)
x += dx;
y += dy;
//每重新整理一次重新繪圖
this.draw();
}}//new乙個circle物件
var c = new circle(x,y,dx,dy,radius);
function animate() ;
animate();
我們可以用for迴圈，迴圈隨機引數，迴圈製造圓，迴圈重新整理不同的圓。那麼我們先引進乙個圓的陣列，一切都是為了方便操作：
//圓的陣列
var cirlearray = ;
//迴圈製造不同的圓，放進陣列
for (var i = 0; i < 100; i++)
function animate()
};animate();
用canvas給自己的部落格園加背景（一）
最近在折騰canvas，寫一點筆記。這一系列的文章最終結果是做出本人部落格的動態背景，不過凡事都要循序漸進，我們先從最簡單的繪製開始。本人接觸電腦的第乙個繪圖工具就是windows自帶的畫圖。畫圖的流程很簡單，選好填充顏色 線條顏色 粗細，用滑鼠選好形狀就可以畫出來了，而且每次重新改變填充顏色 線條...
被玩壞的部落格園 之canvas裝飾部落格園側邊欄
最近抽空學了學canvas,然後用canvas做了個小球運動的demo,大致的效果如下 html很簡單，沒啥講的，就是css那塊相容性你們注意下就好 我懶，沒寫相容 再看看canvas的js處理 就是上面引入的index.js 講解都寫在注釋裡了，寫的比較基礎，方便沒多少基礎的人看 window.o...
給部落格園新增目錄
目錄如上所示 將所生成的部落格html中的標題元素 h1 h6 檢出 根據目錄等級生成目錄樹 根據目錄樹生成html 插入到適當位置 獲取 cnblogs post body 元素下的標題元素 返回標題的陣列 returns function getheadsfrompost return data...