奇怪的HTML5 Canvas drawImage行为

前端之家收集整理的这篇文章主要介绍了奇怪的HTML5 Canvas drawImage行为前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我编写一些使用HTML5画布的代码。一般来说它工作得很好,但现在我发现了一个非常奇怪的行为。奇怪的是,它在不同的浏览器是一致的,所以一定是,我理解的东西错了…尽管文档似乎说的正是我在做什么。这里是代码(它是一个对象方法):
MyCanvas.prototype.getElement = function() {

        var innerHtml = "<div></div>";

        var elem = jQuery(innerHtml,{
            'id' : this.viewId
        });



        var canvas = jQuery("<canvas/>",{
            'id' : this.viewId + "canvas",'width' : this.width,'height' : this.height
        });

        var w = this.width;
        var h = this.height;

        jQuery(elem).append(canvas);

        var imgElem = new Image();

        imgElem.src = this.maskImage;
        imgElem.onload = function() {
            var ctx = canvas[0].getContext('2d');
            ctx.drawImage(this,w,h);

        };

        return elem;
    };

之后,我将再次使用jQuery将这个元素附加到一个已经在页面中的div(这是空白)。
结果将是图像被过度扩展像十倍的宽度….这是奇怪的,因为我理解drawImage,它应该使用w和h值来缩放图像,并给定w和h是尺寸的画布,它应该适合。

我究竟做错了什么?是因为我做绘制的渲染DOM树吗?

解决方法

我发现这个“功能”,以及有点令人讨厌。看起来好像你不想使用CSS来设置canvas元素的width和height属性。用属性(而不是CSS)追加canvas元素,尺寸应该自行纠正。
var canvas = jQuery("<canvas/>",{
    'id' : this.viewId + "canvas"
});

$('#' + this.viewId).attr('height',this.height).attr('width',this.width);
原文链接:https://www.f2er.com/html5/169429.html

猜你在找的HTML5相关文章