您好，我创建了一个类似于 HTML5 Canvas 上的绘画的程序。我有问题，我需要创建一些绘图和缩放工具。我不知道如何立即创建缩放。绘图示例:http://jsfiddle.net/x5rrvcr0/
如何缩放我的绘图？
绘图代码:
<style>
canvas {
background-color: #CECECE;
}
html, body {
background-color: #FFFFFF;
}
</style>
<script>
$(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;
});
});
</script>
<body>
<canvas id="paintCanvas"></canvas>
</body>
最佳答案
如果您想在缩放时保持像素化效果，则需要在临时 Canvas 上绘制，然后才能将该临时 Canvas 复制到主屏幕。
您不再需要放大临时 Canvas ，只需始终按 1:1 比例绘制即可。复制到 View Canvas 时，您可以应用所需的缩放(也可能是平移)。
请记住，绘图是抗锯齿的，因此在缩放时，例如在黑色绘图时，您会看到一些灰色阴影。
我保留了 @FurqanZafar 的记录代码，因为在您想要执行撤消操作时记录一些内容是一个好主意:在这种情况下，只需删除最后一个记录条目并重绘所有内容。
http://jsfiddle.net/gamealchemist/x5rrvcr0/4/
function updatePaintCanvas() {
paintContext.clearRect(0, 0, paintContext.canvas.width, paintContext.canvas.height);
paintContext.save();
paintContext.translate(cvSize * 0.5, cvSize * 0.5);
paintContext.scale(scale, scale);
paintContext.drawImage(drawCanvas, -cvSize * 0.5, -cvSize * 0.5);
paintContext.restore();
}
关于javascript - HTML5 canvas 缩放我的绘图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27243904/