javascript帆布延伸我的形象

$.fn.imageCanvas = function() { 

    if (!document.getElementById('bgCanvas')){ 
     $('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'})) 
     var canvas = document.getElementById('bgCanvas'); 
     var ctx = canvas.getContext('2d'); 
    } 
    var img = new Image(); 
    img.onload = function() { 
     ctx.drawImage(img,0,0,438,300); 
     console.log(this.width); 
     console.log(this.height); 
    } 
    img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
}

在ctx.drawImage我写了x，y，宽度，高度。但画布拉伸此图像。我怎么能与原来的宽/高图像javascript帆布延伸我的形象

来源

2012-11-06 EarthUser

1）'width'和'height'不占用一个单位。他们应该是'500'。 2）如果你也通过CSS应用宽度/高度，他们可以倾斜画布图。这应该避免。 – Shmiddty

如果你只是想显示图像，而不缩放，使用的drawImage的three-argument variant只有x和y：

ctx.drawImage(img,0,0);

如果你要裁剪的底部和你的指定大小右边缘，使用nine-argument variant：

ctx.drawImage(img,0,0,362,240,0,0,362,240);

前四个号码设定剪裁矩形的x/y和宽度/高度，和接下来的四个数字设定的x/y和宽度/ HEIG剪切到画布上的剪切图像矩形的高度。

编辑：

的问题是，jQuery函数对待在选项width和height属性在第二个参数为CSS属性，不作为DOM对象属性对象。如果您检查生成HTML，你会发现：

<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>

，而不是你想要的，这应该是：

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

了有关该问题的讨论，请参见this question。作为一个解决方案，我建议使用来代替：

$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500}))

来源

2012-11-06 16:44:21 apsillers

虽然这样做，但Canvas再次渲染图像...... :( – EarthUser

简单的三参数版本是否也可以扩展您的图像？绝对不应该这样做，如果确实如此，您的canvas可能会出现CSS问题。没有应用影响CSS宽度或画布高度的样式 – apsillers

http://s12.postimage.org/5u4h0irn1/image.png – EarthUser

尝试使用这个库我最近创建了可以加载图像，调整其大小固定的宽度&高度或百分数的和或为base64或BLOB转换。

https://github.com/vnbenny/canvawork.js

希望这可以帮助你！

来源

2016-11-03 11:27:54

javascript帆布延伸我的形象

回答

相关问题