JavaScript中的形狀翻轉

我在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)'; 

};

來源

2014-06-05 user65165

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

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

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

來源

2014-06-05 18:55:47 tylermadison

JavaScript中的形狀翻轉

回答

相關問題