HTML/Java Script Canvas - 如何在源点和目标点之间绘制图像？

Question

我试过使用画布的drawImage函数。

在文档（http://msdn.microsoft.com/en-us/library/ie/ff975414(v=vs.85).aspx）中，我认为最后两个参数是目标点，但我想这不是因为它没有工作。

有没有办法在两点之间绘制图像而不旋转它或类似的东西？

谢谢！

Answer 1

context.drawImage( 
    sourceImage, 
    sourceX, sourceY, sourceWidthToClip, sourceHeightToClip, 
    canvasX, canvasY, scaledWidth, scaledHeight); 

在context.drawImage第一个参数是源图像。

接下来的4个参数是在x，y，宽度&高度矩形子图像从源

最后4个参数在x，y，scaledWidth & scaledHeight矩形缩放的图像上绘制夹帆布。

注释的drawImage：

context.drawImage(

    sourceImage, // the source image to clip from 

    sX,   // the left X position to start clipping 
    sY,   // the top Y position to start clipping 
    sW,   // clip this width of pixels from the source 
    wH,   // clip this height of pixels from the source 

    dX,   // the left X canvas position to start drawing the clipped sub-image 
    dY,   // the top Y canvas position to start drawing the clipped sub-image 
    dW,   // scale sW to dW and draw a dW wide sub-image on the canvas 
    dH   // scale sH to dH and draw a dH high sub-image on the canvas 

} 

视觉的drawImage：

[在这里输入的形象描述] [1]

代码示例的drawImage：

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

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg"; 
 
function start(){ 
 

 
    canvas.width=img.width; 
 
    canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 

 
    var scale=2; 
 
    canvas1.width=471/5*3; 
 
    canvas1.height=255/2*3; 
 

 
    ctx1.drawImage(img, 
 
       94,0,94,120, 
 
       50,50,94*scale,120*scale 
 
       ); 
 
}

body{ background-color: ivory; padding:10px; } 
 
canvas{border:1px solid red;}

<h4>The original image</h4> 
 
<canvas id="canvas" width=300 height=300></canvas><br> 
 
<h4>The clipped & scaled sub-image drawn into the canvas</h4> 
 
<canvas id="drawImage" width=300 height=300></canvas>

例插图的drawImage：

[加法：如何控制DX，DY的HTML范围控件]

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

 
var $dx=$('#dx'); 
 
var $dy=$('#dy'); 
 
var scale=2; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg"; 
 
function start(){ 
 

 
    canvas.width=img.width; 
 
    canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 

 
    canvas1.width=471/5*3; 
 
    canvas1.height=255/2*3; 
 

 
    draw(); 
 

 
    $dx.change(function(){draw();}); 
 
    $dy.change(function(){draw();}); 
 

 
} 
 

 
function draw(){ 
 
    ctx1.clearRect(0,0,canvas1.width,canvas1.height); 
 
    ctx1.drawImage(img,94,0,94,120,$dx.val(),$dy.val(),94*scale,120*scale); 
 
}

body{ background-color: ivory; padding:10px; } 
 
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>The original image</h4> 
 
<canvas id="canvas" width=300 height=300></canvas><br> 
 
<h4>The clipped & scaled sub-image drawn into the canvas</h4> 
 
dx:<input id=dx type=range min=0 max=280 value=0><br> 
 
dy:<input id=dy type=range min=0 max=380 value=0><br> 
 
<canvas id="drawImage" width=300 height=300></canvas>

[1]： http://i.stack.imgur.com/9paHM.jpg