HTML / Javascript 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，width＆amp;高度矩形子图像从该源剪辑

最后4个参数是x，y，scaledWidth＆amp; 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

}

Visual drawImage：

！[在此处输入图片说明] [1]

drawImage的代码示例：

＆＃13;

＆＃13;

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
                );
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

drawImage的示例说明：

[添加：如何使用html范围控件控制dx，dy]

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;   [1]：http://i.stack.imgur.com/9paHM.jpg