的javascript：如何canvas.drawImage工作

我试图绘制图像到画布上，像这样：的javascript：如何canvas.drawImage工作

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=document.getElementById("scream"); 
ctx.drawImage(img,0,0,100,100,0,0,200,200);

画布是由200像素和200像素的图像要大得多（但在200像素风格也就是200px）

正如您在jsfiddle中所看到的，画布不显示图像（我期待图像的一部分）。我的drawImage的理解（如被描述here）是这样的：

“0,0,100,100”，其是被吸入到画布上的部分中的图像上定义一矩形。 0,0定义了顶部/左边角，100,100是边的宽度。
这个矩形被绘制到矩形内的帆布0,0,200,200

任何建议定义什么不顺心吗？

来源

2013-12-13 Jeanluca Scaljeri

错误有，我相信，图像尚未加载。我认为你需要使用回调函数来显示图像，一旦它被加载，但我会留下实际的答案给谁肯定的人:) – kviiri

jsfiddle问题是跨域，在你机器的作品？ –

@kviiri：没有问题，提问者从图像中剪下了白色空间。但是如果图像之前没有加载（不在浏览器缓存中），那么确实会发生这种情况。 – GitaarLAB

你的图像实际上是585 x 585所以你正在做的是从它剪下一个角落（这是空白），并将其绘制到画布上，当然不会显示任何东西。

使用CSS缩放图像实际上并未改变其大小。它只能缩放显示。

所以你需要做的是使用图像的原始大小作为基础。如果你只是想缩小到适合帆布，你可以这样做：

ctx.drawImage(img, 0, 0, 200, 200);

画布也是如此。不要使用CSS扩展画布，但设置宽度和高度属性/属性或其他画布将默认为300x150（然后由你的CSS缩放）：

<canvas width=200 height=200 ...>

Modified fiddle

来源

2013-12-13 20:54:11 K3N

thnx，现在它清晰。我更新了[jsfiddle]（http://jsfiddle.net/FQhGg/4/），因为我需要裁剪和调整大小 –

设置宽度和高度，并以相同的尺寸绘制图像。更新你的小提琴 - http://jsfiddle.net/FQhGg/2/

var c=document.getElementById("myCanvas"), 
    ctx=c.getContext("2d"), 
    img=document.getElementById("scream"), 
    width = img.width, 
    height = img.height; 

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

来源

2013-12-13 20:55:48 NaNpx

的javascript：如何canvas.drawImage工作

回答

相关问题