在畫布內創建畫布的一部分的放大圖像

Question

我試圖在代碼中獲取圍繞點的HTML畫布部分，並將其重新顯示在畫布的75 x75矩形中作爲縮放在版本中。我知道規模允許我放大，但我不知道如何在這種情況下使用它。我在這個小提琴中附加了代碼。任何幫助將不勝感激。

http://jsfiddle.net/37bs7o3a/

HTML

<canvas id="graph" height ="400" width="500"></canvas> 

jQuery的

$(document).ready(function(){ 
var graph = $('#graph'); 
var l = graph[0].getContext('2d'); 

l.beginPath(); 
l.moveTo(50, 50); 
l.lineTo(50, 350); 
l.lineTo(450, 350); 
l.stroke(); 

l.beginPath(); 
l.moveTo(100,250); 
l.lineTo(450,200); 
l.stroke(); 

l.beginPath(); 
l.rect(200, 225, 2, 2); 
l.stroke(); 

l.rect(100, 75, 75, 75); 
l.stroke(); 

}); 

Answer 1

我更新了你的小提琴，包括兩種不同的方式來放大，一個做了重繪，並會給你更好的分辨率。另一個是選定區域的簡單縮放比例，並導致模糊縮放。

http://jsfiddle.net/37bs7o3a/1/

$(document).ready(function(){ 
    var graph = $('#graph'); 
    var l = graph[0].getContext('2d'); 

    function draw(l) { 
     l.beginPath(); 
     l.moveTo(50, 50); 
     l.lineTo(50, 350); 
     l.lineTo(450, 350); 
     l.stroke(); 

     l.beginPath(); 
     l.moveTo(100,250); 
     l.lineTo(450,200); 
     l.stroke(); 

     l.beginPath(); 
     l.rect(200, 225, 2, 2); 
     l.stroke(); 
    } 

    draw(l); 

    function redrawZoom(srcCtx, drawFn, x, y, scale, dx, dy, dw, dh) { 
     var can = document.createElement('canvas'); 
     var ctx = can.getContext('2d'); 
     can.width = srcCtx.canvas.width; 
     can.height = srcCtx.canvas.height; 
     ctx.scale(scale, scale); 
     ctx.translate(-x, -y); 
     drawFn(ctx); 

     // draw zoomed canvas on graph 
     // sy, sy, sw, sh, dx, dy, dw, dh 
     l.drawImage(can, 0, 0, dw, dh, dx, dy, dw, dh); 

     // Draw zoom box 
     l.strokeStyle = "rgba(0,0,255,.5)" 
     l.rect(dx, dy, dw, dh); 
     l.stroke(); 

     return can; 
    } 

    redrawZoom(l, draw, 190, 215, 3, 100, 75, 75, 75); 

    function blurryZoom(ctx, x, y, w, h, scale, dx, dy) { 

     // zoom outline 
     ctx.beginPath(); 
     ctx.rect(190, 215, w, h); 
     ctx.strokeStyle = "rgba(255,0,0,.5)" 
     ctx.stroke(); 

     // zoom - Blurry Zoom 
     l.drawImage(ctx.canvas,190,215,w,h,dx,dy,w*scale,h*scale); 
    } 

    blurryZoom(l, 190, 215, 25, 25, 3, 175, 75); 

}); 

Answer 2

您可能會移動繪圖命令像分離功能：

var doWhatEver = function(l) { 
    // Drawing commands come here... 
} 

然後，執行轉換功能，是這樣的：

var clipAndZoomAndScale = function(whatToDo, l, zoomTo) { 
    l.save(); // save context, because we change the 2d matrix 
    // Creates a clipping rectangle 
    l.rect(zoomTo.x, zoomTo.y, zoomTo.width, zoomTo.height); 
    l.clip();  

    // translate to the box corner 
    l.translate(zoomTo.x , zoomTo.y); 
    // scale the drawing area 
    l.scale(zoomTo.width/zoomTo.origWidth, zoomTo.height/zoomTo.origHeight); 
    // and finally, center the box to the orinal 
    l.translate(zoomTo.origWidth/2 - zoomTo.centerAtX, 
       zoomTo.origHeight/2 - zoomTo.centerAtY); 

    // draw the custom drawings here... 
    whatToDo(l); 
    l.restore(); // restore context 
} 

然後用它將繪圖命令轉換爲矩形區域。轉換繪圖命令而不是僅僅複製像素的好處當然是，您始終保持繪圖的準確性，因爲它始終是矢量。

var graph = $('#graph'); 
var l = graph[0].getContext('2d'); 

// first draw without the transformation 
doWhatEver(l); 

// Then draw with the scaled context 
clipAndZoomAndScale(doWhatEver, l, { 
    x : 100, y : 75, 
    width : 75, height:75, 
    centerAtX : 200, centerAtY : 225, 
    origWidth : 500, origHeight : 400 
}); 

請注意的是，在您的示例源寬高比500：400是不一樣的，在目標框75:75縱橫比，所以原始圖像的副本將出現失真。爲了解決這個問題設置origWidth到400

http://jsfiddle.net/o60t2mhr/

Answer 3

我想你想是這樣的？您可以使用drawImage。您基本上選擇畫布區域，目標X/Y和目標寬度/高度。

http://jsfiddle.net/37bs7o3a/2/

$(document).ready(function(){ 
 
    var graph = $('#graph'); 
 
    var l = graph[0].getContext('2d'); 
 
    
 
    l.beginPath(); 
 
    l.moveTo(50, 50); 
 
    l.lineTo(50, 350); 
 
    l.lineTo(450, 350); 
 
    l.stroke(); 
 
    
 
    l.beginPath(); 
 
    l.moveTo(100,250); 
 
    l.lineTo(450,200); 
 
    l.stroke(); 
 
    
 
    l.beginPath(); 
 
    l.rect(200, 225, 2, 2); 
 
    l.stroke(); 
 
    
 
    l.rect(100, 75, 75, 75); 
 
    l.stroke(); 
 
    
 
    l.drawImage(
 
     graph[0], // Canvas 
 
     180, // sourceX 
 
     205, // sourceY 
 
     40, // sourceW 
 
     40, // sourceH 
 
     
 
     100, // destX 
 
     75, // destY 
 
     75, // destW 
 
     75 // destH 
 
    ); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="graph" height ="400" width="500"></canvas>