我能够处理一张图像,能够平滑地缩放和平移,还能够在该图像上绘制形状。
在画布上绘制两个图像。但是当我放大它时,Chrome 会崩溃。
gkhead.jpg 是主图像,在此图像上要绘制 alphaball.png 图像。
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
function canvasApp(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
eventShipLoaded();
function eventShipLoaded() {
draw1(scaleValue);
}
function draw1(scaleValue){
var tileSheet = new Image();
tileSheet.addEventListener('load', eventShipLoaded , false);
tileSheet.src = "gkhead.jpg";
var tileSheet1 = new Image();
tileSheet1.addEventListener('load', eventShipLoaded , false);
tileSheet1.src = "alphaball.png";
var x = 0;
var y = 0;
var width = 480;
var height = 480;
context.save();
context.setTransform(1,0,0,1,0,0)
context.globalAlpha = 0.5;
//context.drawImage(tileSheet,x,y, width, height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
//drawBoard();
context.save();
context.drawImage(tileSheet, x, y, tileSheet.width*scaleValue, tileSheet.height*scaleValue);
context.scale(scaleValue, scaleValue);
context.drawImage(tileSheet1, 200, 200, 40/scaleValue, 40/scaleValue);
context.restore();
/*context.globalAlpha = 0.5;
context.fillStyle = "blue";
context.fillRect(180, 180, 40 / scaleValue, 40 / scaleValue);
context.fillRect(260, 190, 40 / scaleValue, 40 / scaleValue);*/
};
var scaleValue = 1;
var scaleMultiplier = 0.8;
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
scaleValue /= scaleMultiplier;
draw1(scaleValue);
//eventShipLoaded();
}, false);
document.getElementById("minus").addEventListener("click", function(){
scaleValue *= scaleMultiplier;
//draw1(scaleValue);
eventShipLoaded();
}, false);
document.getElementById("original_size").addEventListener("click", function(){
scaleValue = 1;
//draw1(scaleValue);
eventShipLoaded();
}, false);
var isDown = false;
var startCoords = [];
var last = [0, 0];
canvas.onmousedown = function(e){
isDown = true;
startCoords = [
e.offsetX - last[0],
e.offsetY - last[1]
];
};
canvas.onmouseup = function(e){
isDown = false;
last = [
e.offsetX - startCoords[0], // set last coordinates
e.offsetY - startCoords[1]
];
};
canvas.onmousemove = function(e){
if(!isDown) return;
var x = e.offsetX;
var y = e.offsetY;
context.setTransform(1, 0, 0, 1, x - startCoords[0], y - startCoords[1]);
//draw1(scaleValue);
eventShipLoaded();
}
}