Question

我使用javascript（lineTo，moveTo，rect等）在画布上绘制了2个图像，我想以滚动方式操纵这些图像。我知道我应该编写像＆＃34; onmouseover＆＃34;并且＆＃34; onmouseaway＆＃34;，事情是我不知道如何操纵画布中已有的两种形状，因为我没有他们的来源......我试过谷歌但是它有点令人困惑。

警告：我是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)';

};

Answer 1

如果你没有使用像EasleJS这样的库来实现交互性（http://www.ajohnstone.com/test/hackday/CreateJS-EaselJS-b262a85/tutorials/Mouse%20Interaction/），那么它会有点棘手，因为canvas使用立即渲染模式你需要保留状态你的对象使用鼠标交互事件侦听器来触发动画循环（希望使用requestAnimationFrame获得性能，请参阅：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/）。我希望这能让你朝着正确的方向前进。

JavaScript中的形状翻转

1 个答案: