我编写一些使用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树吗?
解决方法
原文地址:https://www.jb51.cc/html5/169429.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。