HTML5canvas：缩放
有没有简单的方法如何放大和缩小canvas（JavaScript）？ 基本上我有一个400x400px的canvas，我希望能够放大与'mousedown'（2倍），并返回'mouseup'。
过去两天使用googlesearch，但没有运气到目前为止。 🙁
感谢帮助。
基于使用drawImage的build议，你也可以把它和scale函数结合起来。
因此，在绘制图像之前，请将上下文缩放到所需的缩放级别：
ctx.scale(2, 2) // Doubles size of anything draw to canvas. 我在这里创build了一个小例子http://jsfiddle.net/mBzVR/4/ ，它使用drawImage和scale来放大mousedown并放大mouseup。
试试这个：
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <style> body { margin: 0px; padding: 0px; } #wrapper { position: relative; border: 1px solid #9C9898; width: 578px; height: 200px; } #buttonWrapper { position: absolute; width: 30px; top: 2px; right: 2px; } input[type = "button"] { padding: 5px; width: 30px; margin: 0px 0px 2px 0px; } </style> <script> function draw(scale, translatePos){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // clear canvas context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.translate(translatePos.x, translatePos.y); context.scale(scale, scale); context.beginPath(); // begin custom shape context.moveTo(-119, -20); context.bezierCurveTo(-159, 0, -159, 50, -59, 50); context.bezierCurveTo(-39, 80, 31, 80, 51, 50); context.bezierCurveTo(131, 50, 131, 20, 101, 0); context.bezierCurveTo(141, -60, 81, -70, 51, -50); context.bezierCurveTo(31, -95, -39, -80, -39, -50); context.bezierCurveTo(-89, -95, -139, -80, -119, -20); context.closePath(); // complete custom shape var grd = context.createLinearGradient(-59, -100, 81, 100); grd.addColorStop(0, "#8ED6FF"); // light blue grd.addColorStop(1, "#004CB3"); // dark blue context.fillStyle = grd; context.fill(); context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke(); context.restore(); } window.onload = function(){ var canvas = document.getElementById("myCanvas"); var translatePos = { x: canvas.width / 2, y: canvas.height / 2 }; var scale = 1.0; var scaleMultiplier = 0.8; var startDragOffset = {}; var mouseDown = false; // add button event listeners document.getElementById("plus").addEventListener("click", function(){ scale /= scaleMultiplier; draw(scale, translatePos); }, false); document.getElementById("minus").addEventListener("click", function(){ scale *= scaleMultiplier; draw(scale, translatePos); }, false); // add event listeners to handle screen drag canvas.addEventListener("mousedown", function(evt){ mouseDown = true; startDragOffset.x = evt.clientX - translatePos.x; startDragOffset.y = evt.clientY - translatePos.y; }); canvas.addEventListener("mouseup", function(evt){ mouseDown = false; }); canvas.addEventListener("mouseover", function(evt){ mouseDown = false; }); canvas.addEventListener("mouseout", function(evt){ mouseDown = false; }); canvas.addEventListener("mousemove", function(evt){ if (mouseDown) { translatePos.x = evt.clientX - startDragOffset.x; translatePos.y = evt.clientY - startDragOffset.y; draw(scale, translatePos); } }); draw(scale, translatePos); }; jQuery(document).ready(function(){ $("#wrapper").mouseover(function(e){ $('#status').html(e.pageX +', '+ e.pageY); }); }) </script> </head> <body onmousedown="return false;"> <div id="wrapper"> <canvas id="myCanvas" width="578" height="200"> </canvas> <div id="buttonWrapper"> <input type="button" id="plus" value="+"><input type="button" id="minus" value="-"> </div> </div> <h2 id="status"> 0, 0 </h2> </body> </html>
作品完美适合我与变焦和鼠标移动..你可以定制它鼠标滚轮上下Njoy！
IIRCcanvas是一个光栅风格的位图。 它不会是可缩放的，因为没有存储的信息要放大。
最好的办法是把两个副本放在内存中（放大和非放大），然后用鼠标点击来交换它们。
如果您有源图像或canvas元素以及要绘制的400x400canvas，则可以使用drawImage方法实现缩放。
所以举个例子，完整的视图可能是这样的
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
放大视图可能是这样的
ctx.drawImage(img, img.width / 4, img.height / 4, img.width / 2, img.height / 2, 0, 0, canvas.width, canvas.height);
drawImage的第一个参数是要绘制的图像元素或canvas元素，接下来的4个是要从源采样的x，y，宽度和高度，最后4个参数是区域的x，y，宽度和高度。画在canvas上。 然后它会处理你的缩放。
您只需根据缩放级别select源样本的宽度和高度，并根据鼠标点击的位置减去一半（但您需要确保矩形不是越界）。
一个选项是使用css缩放function：
$("#canvas_id").css("zoom","x%");
