HTML5 画布在具有缩放的背景图像上绘图答案

【问题标题】：HTML5 canvas drawing on background image with zoomHTML5 画布在具有缩放的背景图像上绘图
【发布时间】：2014-06-28 04:16:19
【问题描述】：

如何制作一个可以在背景图像上绘制并缩放选定位置的简单脚本。使用 html5 画布缩放背景图像和绘图

【问题讨论】：

标签： html canvas paint

【解决方案1】：

Canvas 提供了一种使用变换缩放到某个点的相当简单的方法。

转换使用context.translate(x,y) 到所需的缩放点。翻译会将画布的 [0,0] 原点重置为指定的 [x,y] 坐标。
使用context.scale(sx,sy) 将画布缩放 到所需大小。 Scale 将导致任何未来的绘图调整为指定的 [scaleX,scaleY] 大小。注意：缩放发生在画布的当前原点（当前原点已通过上面的翻译重置）。
使用context.drawImage(image,-x,-y) 绘制偏移量为 -x,-y 的图像和绘图。需要偏移量来重绘图像，同时保持所需的缩放点。

演示：http://jsfiddle.net/m1erickson/5kQHb/

在红点处缩小：

在红点处放大：

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color:ivory; }
    canvas{border:1px solid red;}
    input.vrange1 {height:250px; -webkit-appearance: slider-vertical; writing-mode: bt-lr; }
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var PI=Math.PI;
    var PI2=PI*2;
    var cw,ch,imgW,imgH,mouseX,mouseY;
    var scaleFactor=1.00;

    $scaler=$("#scaler");
    $scaler.val(scaleFactor);
    $scaler.hide();

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/mapSmall.png";
    function start(){
        cw=canvas.width=imgW=img.width;
        ch=canvas.height=imgH=img.height;
        ctx.drawImage(img,0,0);

        $("#canvas").mousedown(function(e){handleMouseDown(e);});   
    }

    function dot(x,y,color,radius){
        ctx.save();
        ctx.beginPath();
        ctx.arc(x,y,radius,0,PI2);
        ctx.closePath();
        ctx.fillStyle=color;
        ctx.fill();
        ctx.restore();
    }

    function draw(x,y,scale){
        ctx.clearRect(0,0,cw,ch);
        ctx.save();
        ctx.translate(x,y);
        ctx.scale(scale,scale);
        ctx.drawImage(img,-x,-y);
        ctx.restore();
        dot(x,y,"red",3);
    }

    $('#scaler').on('change', function(){
        scaleFactor=($(this).val());
        draw(mouseX,mouseY,scaleFactor);    
    });

    function handleMouseDown(e){
      e.preventDefault();
      e.stopPropagation();
      if(!mouseX){
          var BB=canvas.getBoundingClientRect();
          var offsetX=BB.left;
          var offsetY=BB.top;  
          mouseX=parseInt(e.clientX-offsetX);
          mouseY=parseInt(e.clientY-offsetY);
          draw(mouseX,mouseY,1.00);
          $("#instructions").text("Change the slider to zoom the map");
          $scaler.show();
      }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4 id=instructions>Click on the map to select a zoom-point.</h4>
    <input type="range" class=vrange id="scaler" value=1.00 min=0.00 max=3.00 step=0.10"><br>   
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：