存在元标记时,HTML5 Canvas 不显示图像

Posted

技术标签:

【中文标题】存在元标记时,HTML5 Canvas 不显示图像【英文标题】:HTML5 Canvas not displaying images when meta tag present 【发布时间】:2013-02-02 20:52:25 【问题描述】:

html5 画布(仅使用 drawImage 函数)未显示在移动设备上,但在我的笔记本电脑上。

我没有收到任何错误或任何错误,但它不会在 ios 上的 chrome 或 android 上的默认浏览器中显示..

仅当文档中包含以下元标记时才会出现此问题:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

带有元标记:mmhudson.com/index.html

没有:mmhudson.com/index1.html

【问题讨论】:

有点奇怪。您确定在移动设备上没有兑现问题吗?我唯一可以建议的另一件事是正确实现您的元标记(哦,添加一个文档类型只是因为它是一种很好的做法)。 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;(即没有关闭 &lt;/meta&gt; 标签)。我真的不明白这会如何影响它。顺便说一句,您的第二个链接指向第一个链接。 这在我的 ipad 上显示得很好 @pebbl 你的意思是缓存问题?我将如何测试这个?我删除了结束标签并添加了一个文档类型,但没有任何改变。看起来图像只是没有加载。 @maxhud - 是的,为错字道歉:) 测试缓存问题的最简单方法是通过在末尾添加查询字符串来更改所涉及的 URL。所以请求mmhudson.com/index.html?q=1,你也应该对你的页面资产做同样的事情,比如图片,所以mmhudson.com/images/a.png?q=1——正如我所说,只是一个猜测。 【参考方案1】:

这两个页​​面之间的区别不仅仅是元标记。

具体来说,带有元标记的那个没有ontouchstart事件。

【讨论】:

以上是关于存在元标记时,HTML5 Canvas 不显示图像的主要内容,如果未能解决你的问题,请参考以下文章

Canvas 与 DOM - HTML5 中最有效的图像显示方法是啥?

Vue JS中的打开图形元标记不显示图像

HTML5——Canvas 与 SVG 区别

html5 canvas怎么载入图像

html5 canvas怎么载入图像

HTML5 Canvas 图像缩放问题