html5 画布放大,HTML5画布放大我的图纸

您好，我在HTML5画布上创建一个像油漆一样的程序。我有问题，我需要创建一些工具绘图和缩放。我不知道如何无延迟地创建缩放。绘图示例：http://jsfiddle.net/x5rrvcr0/HTML5画布放大我的图纸

如何缩放我的图纸？

绘制代码：

canvas {

background-color: #CECECE;

}

html, body {

background-color: #FFFFFF;

}

$(document).ready(function() {

var paintCanvas = document.getElementById("paintCanvas");

var paintCtx = paintCanvas.getContext("2d");

var size = 500;

paintCanvas.width = size;

paintCanvas.height = size;

var draw = false;

var prevMouseX = 0;

var prevMouseY = 0;

function getMousePos(canvas, evt) {

evt = evt.originalEvent || window.event || evt;

var rect = canvas.getBoundingClientRect();

if (evt.clientX !== undefined && evt.clientY !== undefined) {

return {

x: evt.clientX - rect.left,

y: evt.clientY - rect.top

};

}

}

$("#paintCanvas").on("mousedown", function(e) {

draw = true;

var coords = getMousePos(paintCanvas);

prevMouseX = coords.x;

prevMouseY = coords.y;

});

$("#paintCanvas").on("mousemove", function(e) {

if(draw) {

var coords = getMousePos(paintCanvas, e);

paintCtx.beginPath();

paintCtx.lineWidth = 10;

paintCtx.strokeStyle = "#000000";

paintCtx.moveTo(prevMouseX, prevMouseY);

paintCtx.lineTo(coords.x, coords.y);

paintCtx.stroke();

prevMouseX = coords.x;

prevMouseY = coords.y;

}

});

$("#paintCanvas").on("mouseup", function(e) {

draw = false;

});

});

+1

哪里是你有问题变焦代码？请张贴，以便我们可以看看它。 –

2014-12-02 08:20:51

+0

我没有缩放代码，我需要的想法如何使它：/ –

2014-12-02 08:22:04