canvas動畫3 互動

時隔很久，本人終於又寫部落格了（重度拖延症），把之前留下的canvas互動動畫講一講。

電腦上的互動，指的是滑鼠和鍵盤，我們今天主要用的是滑鼠。

既然是滑鼠的話，就要獲取滑鼠的各種事件，這次以mousemove做示例。

我們先定義乙個滑鼠物件，然後新增mousemove事件：

var mouse = 
//這樣的話控制台就會跟隨我們的滑鼠移動輸出相應的座標
window.addeventlistener("mousemove",function (event) );

我們宣告乙個初始化函式init()，用於把製造圓的過程封裝：

function init() 
}init();

function circle(x, y, dx, dy, radius) 
this.update = function() 
if (this.y + this.radius > innerheight || this.y - this.radius < 0 ) 
//重新整理繪製時圓的偏移運動
this.x += this.dx;
this.y += this.dy;
//根據更新的值進行繪製
this.draw();
}}

接下來我們就要用mousemove於動畫進行互動了，我們假定圓心在滑鼠座標周圍50px以內的時候圓會增大，這段**應該寫在update()裡：

if (mouse.x - this.x < 50 && mouse.x - this.x >-50 && mouse.y - this.y < 50 && mouse.y - this.y >-50) 
}

我們設定了10個圓，把滑鼠移上去的時候會看到在控制範圍內的圓會不斷變大，不會停下來，所以我在前面就設定了乙個圓半徑的最大值，以免它一直增大，然後把注釋的內容去掉，圓就不會無限增大了：

但是有乙個問題，圓放大了以後不會縮小，那麼我們就讓它在離開圓50px半徑範圍後縮小：

if (mouse.x - this.x < 50 && mouse.x - this.x >-50 && mouse.y - this.y < 50 && mouse.y - this.y >-50) 
//其他的所有圓半徑不斷減小
}else

這時候又有新問題產生了，畫面一片空白，因為圓心不在滑鼠固定範圍內的圓全都變小了，甚至半徑為負！顯然簡單的else是不成立的，還是得加個條件：

if (mouse.x - this.x < 50 && mouse.x - this.x >-50 && mouse.y - this.y < 50 && mouse.y - this.y >-50) 
//其他的所有圓半徑減小到最小值
}else if (this.radius > this.minradius)

這裡出現了乙個新值：minradius，我加在了circle物件裡this.minradius = radius;，以原本的初始值作為它的最小值。好了，現在基本效果已經成型了：

接下來就是顏色的問題了，只要懂得canvas的基本api，修改顏色完全就是小兒科。我們設定乙個陣列，用於存放顏色值。

var colorarray = [
'#58d68d',
'#e67f22',
'#3598db',
'#e84c3d',
'#9a59b5',
'#27ae61',
'#d25400',
'#bec3c7',
'#297fb8'
]

然後在circle物件裡加上乙個bg屬性：this.bg = colorarray[math.floor(math.random()*colorarray.length)];，再往circle的繪製函式添上一句ctx.fillstyle = this.bg;，然後ctx.fill();，多彩運動的圓圈canvas就做完了。

這是乙個運用mousemove事件做的canvas互動動畫，有興趣的可以嘗試其他事件（製作遊戲用的鍵盤事件以及其他滑鼠事件），或者思考如何給球加重力，如何檢測碰撞事件，canvas的世界並不只有這麼一點，相關資料的話，給大家推薦本書《canvas開發詳解》。

/**
*  * @authors dkplus ([email protected])
* @date    2017-10-01 20:37:26
* @version $1.0$
*//**
* 獲取canvas物件，設定寬度高度自適應
* @type 
*/var canvas = document.queryselector("#canvas");
canvas.width = window.innerwidth;
canvas.height = window.innerheight;
var ctx = canvas.getcontext("2d");
/** * 螢幕滑鼠座標
* @type 
*/var mouse = 
/** * @param  
* @return 
*/window.addeventlistener("mousemove",function (event) );
/** * @param  
* @return 
*/window.addeventlistener("resize",function () )
//繪製圓的最大半徑
var maxradius = 40;
// var minradius = 2;
//圓的顏色陣列
var colorarray = [
'#58d68d',
'#e67f22',
'#3598db',
'#e84c3d',
'#9a59b5',
'#27ae61',
'#d25400',
'#bec3c7',
'#297fb8'
]/**
* @param 
* @param 
* @param 
* @param 
* @param 
* minradius圓的最小半徑
* bg圓的背景顏色
* draw繪製函式
* update圓運動偏移
*/function circle(x, y, dx, dy, radius) 
this.update = function() 
if (this.y + this.radius > innerheight || this.y - this.radius < 0 ) 
//重新整理繪製時圓的偏移運動
this.x += this.dx;
this.y += this.dy;
//滑鼠半徑50畫素範圍內的圓，它們的半徑逐步增加到最大值
if (mouse.x - this.x < 50 && mouse.x - this.x >-50 && mouse.y - this.y < 50 && mouse.y - this.y >-50) 
//其他的所有圓半徑減小到最小值
}else if (this.radius > this.minradius) 
//根據更新的值進行繪製
this.draw();
}}//圓的物件陣列
var circlearray = ;
/** * 初始化函式，製造800個隨機座標、偏移速度和半徑的圓，加入到物件陣列
* @return 
*/function init() 
}init();
/** * 動畫函式
* @return 
*/function animate() 
}animate();

canvas動畫3 互動

canvas動畫時鐘

canvas動畫迴圈

canvas動畫時鐘

canvas動畫3 互動

canvas動畫時鐘

canvas動畫迴圈

canvas動畫時鐘

相關推薦