被玩壞的部落格園 之canvas裝飾部落格園側邊欄

最近抽空學了學canvas,然後用canvas做了個小球運動的demo,大致的效果如下：

html很簡單，沒啥講的，就是css那塊相容性你們注意下就好（我懶，沒寫相容），再看看canvas的js處理**，就是上面引入的index.js(講解都寫在注釋裡了，寫的比較基礎，方便沒多少基礎的人看)：

window.onload = function();

var circle = new circle(circleconfig);//
初始化球
circle.init();//
初始化var zoom=function(e));
circle.init();}}
else
); circle.init();}}
}if(e.wheeldelta && event.ctrlkey)
else
if(e.detail) 
} if(document.addeventlistener)
window.onmousewheel = document.onmousewheel = zoom;//
除火狐之外的瀏覽器
function circle(o) ;
this.instance = ;//
可以理解為例項陣列，用來存球的
this.maxlinelength = o.maxlinelength || 100;//
最大線長度，就是2個球在這個距離內會在之間畫根線
function
ball() 
if (this.y < this.radius || this.y > height - this
.radius) 
};this.init = function() ;
this.move = function() ;
}this.ball =;
this.arc = function() }}
};this.draw = function
() ;
this.move = function
() 
this
.draw();
requestanimationframe(
this.move.bind(this));//
這裡用bind是強行改變move函式的上下文環境，不然在requestanimationframe中的this會變得
//requestanimationframe 請求動畫幀，可以理解為控制函式執行的頻率（本來這裡可以用遞迴執行，但是遞迴控制不了頻率，會卡死頁面的，settimeout也可以實現類似的效果）
}; 
this.init = function
() 
this
.move();};}
function
getrandom(s) 
function
randomcolor() ;
};

把上面的js改了改，插入到頁面：

完整**如下：

canvas的源**：歡迎star

ps: 抽空我會優化剛進頁面左邊白屏的問題 

部落格園的夢想

非常感謝大家對發展的熱烈關注與熱心幫助 非常感謝很多朋友提出了非常好的建議，讓我有很多收穫，給我帶來了更大的信心與動力！的發展牽動了這麼多朋友的心，讓我很感動，更讓我感受了更大的責任！的發展來自於所聚集的人群的力量，這個人群不僅僅是技術愛好者，技術精英，而且是影響著中國軟體產業發展的中流砥柱。eyy...

部落格園的CSRF

csrf全稱 cross site request forgery，跨站請求偽造。通俗理解 攻擊者盜用當前使用者身份，髮請當前使用者的惡意請求 如郵件，銀行轉賬等。csrf原理 登入 a，生成本地cookie資訊 登入危險 b，b獲取 a的內容，並向a傳送請求操作，若成功，則csrf過程成功。其中登...

用canvas給自己的部落格園加背景（二）

前一篇大概介紹了canvas繪圖的一些基礎api，本文來介紹動畫的部分，canvas最關鍵的函式是requestanimationframe callback 這是乙個用於製作逐幀動畫的函式，在它出現之前，我們的動畫基本用settimeout或者setinterval製作。我們可以嘗試宣告乙個ani...