2014-06-05 50 views
0

我在canvas中使用javascript(lineTo,moveTo,rect等)繪製了2個圖像,並且我想以翻轉方式操作這些圖像。我知道我應該編寫像「onmouseover」和「onmouseaway」這樣的函數,事情是我不知道如何操縱我已經在畫布中擁有的兩個形狀,因爲我沒有它們的源代碼...我嘗試了谷歌搜索,但它有點混亂。JavaScript中的形狀翻轉

警報:我是初學者在JS

http://jsfiddle.net/aertop9416/J7Brj/embedded/result/

的.js如果你不使用庫文件

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

function drawTriangle(){ 
    context.beginPath(); 
    context.moveTo(225,275); 
    context.lineTo(25,25); 
    context.lineTo(0,275); 
    context.fill(); 
    // context.fillStyle = 'rgb(200, 95, 124)'; 
}; 

function drawRect(){ 
    context.fillRect(300,25,100,100); 
    // context.clearRect(245,245,60,60); 
    // context.strokeRect(250,250,50,50); 
    context.fillStyle = 'rgb(120, 195, 124)'; 

}; 
+0

你是什麼意思的「翻轉有點方式」? – soktinpk

+0

解釋你想要什麼類型的動畫效果 –

回答

1

如EasleJS的交互(http://www.ajohnstone.com/test/hackday/CreateJS-EaselJS-b262a85/tutorials/Mouse%20Interaction/),這是怎麼回事有點棘手,因爲畫布使用即時渲染模式,您需要保留對象的狀態。使用鼠標交互事件偵聽器觸發動畫循環(希望使用requestAnimationFrame進行性能查看:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/)。我希望這能讓你朝着正確的方向前進。