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中的形状翻转

回答

相关问题