Javascript HTML/Java脚本画布-如何在源点和目标点之间绘制图像？

我尝试使用画布的drawImage功能

在文档（）中，我认为最后两个参数是目标点，但我想这不是因为它不起作用

有没有一种方法可以在两个点之间绘制图像而不旋转它或类似的东西

谢谢

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

}

视觉绘图图像：

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

}

!！[在此处输入图像描述][1]

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

}

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvas1=document.getElementById（“drawImage”）；
var ctx1=canvas1.getContext（“2d”）；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg";
函数start（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
var量表=2；
画布1.宽度=471/5*3；
画布1.高度=255/2*3；
ctx1.图纸图像（img，
94,0,94,120,
50,50,94*刻度，120*刻度
);
}

body{背景色：象牙色；填充：10px；}
画布{边框：1px纯红；}

原始图像


绘制到画布中的剪裁和缩放子图像

Mozilla在这方面有很好的信息：

drawImage（image、sx、sy、sWidth、sHeight、dx、dy、dWidth、dHeight）

。最后两个是目的地宽度和高度。谢谢！这对理解真的很有用。所以没有办法选择目标x和y？也许是一些jQuery插件？没有jQuery插件——html画布是一种javascript生物，但添加用户控件很容易。我已经添加到我的答案中，以展示如何使用html范围控件控制dx、dy。祝你的项目好运！这是一个很好的答案。给你道具，先生。