Question

图像坐标总是让我迷惑。所以测试这个我做了一个小例子。我有一个500x500的图像。我有两个画布，我想在第一个画布上绘制图像。画布的大小是500x500 。画布从顶部开始是50像素，从左边开始是250像素。画布上没有画出图像。我可以解决这个问题。如果我在这里做错了，请纠正我

绘制图像功能中有八个坐标（这让我最困惑）

1st=0,start_X of source image;

2nd=0,start_Y of source image;

3rd=500,destination_x of source image;

4th=500,destination_Y of source image;

5th=0,canvas_start_X ;

6th=0,canvas_start_Y;

7th=500,canvas_finish_X;

8th=500,canvas_finish_Y;

jsfiddle

link to image

代码：

<html>
<head>
<style>

*{margin:0px;padding:0px;}
#mydiv{
width:100%;
height:100%;
background-color:black;
}
#mycanvas1{
width:500px;
height:500px;
background-color:white;
border:1px solid white;
margin-top:50px;
margin-left:250px;
}
</style>
</head>
<body>
<div id="mydiv">
<canvas id="mycanvas1"></canvas>
<canvas id="mycanvas2"></canvas>
</div>
<script >
function makeit(){
var canvas1=document.getElementById("mycanvas1");
var ctxbg=canvas1.getContext('2d');
var bgImage=new Image();
bgImage.src="bg.jpg";
alert(bgImage.width+" " +bgImage.height);
bgImage.addEventListener('load',drawBg,false);
function drawBg(){

ctxbg.drawImage(bgImage,0,0,500,0,0,,500,500);
}
}
window.onload=makeit;
</script>
</body>

Answer 1

如果在画布上绘制图像的最令人困惑的方式（在2D环境中）让你感到困惑，为什么不尝试其中一种不那么容易混淆的方法呢？

ctx.drawImage(img,x,y);

或

ctx.drawImage(img,x,y,width,height);

您还应该在canvas元素上设置画布宽度/高度属性，而不是在css中。 css不会改变画布的实际大小，使用的像素数量，以及它的外观＆＃34;，也就是在浏览器中呈现。您可以在800x600中显示1x1像素大小的画布，它仍然是1像素。

在您的情况下发生的情况是，如果未指定宽度/高度属性，则默认值为300x150，因此仅渲染图像的左上角通过css扩展到500x500像素。

您想要如何设置尺寸。

<canvas id="mycanvas1" width="500" height="500"></canvas>

Answer 2

The 3rd＆amp;第4个数字参数指定要从原始图像剪切的区域的宽度和高度。第3和第4个参数用于剪切原始图像的子部分。

第7＆amp;第8个数字参数指定要在画布上绘制的图像的宽度和高度。第7和第8个参数用于在画布上绘制时缩放原始图像。

想想扩展的drawImage，如下所示：

drawImage(
    sourceImage,

    // clip a subsection of the original image 
    // starting at clipX,clipY 
    // with the clipped subsection being clipWidth and clipHeight in size
    clipX,clipY,clipWidth,clipHeight,            

    // draw that clipped subsection on the canvas at canvasX,canvasY
    // with optional scaling to scaledWidth,scaledHeight 
    // (no scaling if clipWidth==scaledWidth && clipHeight==scaledHeight)
    canvasX,canvasY,scaledWidth,scaledHeight
);

所以你可以像这样加载和绘制你的图像：

var bgImage=new Image();
bgImage.onload=function(){
    ctxbg.drawImage(bgImage,0,0)
}
bgImage.src="bg.jpg";

由于您在绘制到画布时没有剪切或缩放原始图像，因此没有理由使用drawImage的扩展版本。但是如果你没有指定剪裁和没有缩放，那么drawImage的扩展版本仍然有效。

此代码将在画布上绘制整个bgImage（假设画布足够大以容纳完整的bgImage）：

var bgImage=new Image();
bgImage.onload=function(){
    ctxbg.drawImage(bgImage,0,0,bgImage.width,bgImage.height,0,0,bgImage.width,bgImage.height)
}
bgImage.src="bg.jpg";

示例代码：

<!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>
    #mydiv{
    width:1000px;
    height:1000px;
    background-color:black;
    }
    #mycanvas1{
    width:500px;
    height:500px;
    background-color:white;
    border:1px solid white;
    margin-top:50px;
    margin-left:250px;
    }
</style>
<script>
window.onload=function(){

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

    var ctxbg=canvas1.getContext('2d');
    var bgImage=new Image();
        bgImage.onload=function(){
           var w=bgImage.width;
           var h=bgImage.height;
           ctxbg.drawImage(bgImage,0,0,w,h,0,0,w,h); 
        }
    bgImage.src="https://dl.dropboxusercontent.com/u/139992952/multple/bgImage1.jpg";

}; 
</script>
</head>
<body>
<div id="mydiv">
    <canvas id="mycanvas1" width=300 height=300></canvas>
</div>
</body>
</html>

drawImage（）方法坐标上的混淆

2 个答案: