HTML5 - Chrome中canvas标签显示图片空白问题

最新推荐文章于 2025-05-23 09:00:46 发布

bigodawn

最新推荐文章于 2025-05-23 09:00:46 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端之html5 文章标签： chrome html5 browser border image function

本文链接：https://blog.youkuaiyun.com/bigodawn/article/details/6920469

本文探讨了在HTML5的Chrome浏览器中使用canvas标签显示图片时遇到的空白问题，指出在图片未完全加载时drawImage会导致问题，并提出了在img元素上添加onload事件来确保图片加载完成后再进行绘制的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" >
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="1.jpg";
cxt.drawImage(img,0,0,500,500);
</script>
</body>
</html>

二、解决：

在11行处加onload事件

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" >
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bigodawn

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html5canvas绘图空白,html5 canvas toDataURL返回空白图像

weixin_33402215的博客

06-24

1637

我使用以下代码绘制画布并使用toDataUrl将其保存为png图像。html5 canvas toDataURL返回空白图像body {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #9C9898;}function loadImages(sources, callback) {var images = {};var loadedIm...

html5模板-整洁wordpress主题Bearded.zip

03-15

例如，`<header>`、`<footer>`、`<nav>`等语义化标签使得内容结构更清晰，`<canvas>`用于动态图形，`<audio>`和`<video>`则支持多媒体播放。 2. WordPress：WordPress是一种开源的内容管理系统（CMS），基于PHP和...

3 条评论您还未登录，请先登录后发表或查看评论

html转换成canvas文字空白,HTML5 Canvas toDataURL返回空白

weixin_39781594的博客

05-30

553

我想上传图像文件，将它们绘制到画布中，进行更改并将其保存在数据库中。我尝试测试画布图像(Pic)返回的base64值，该值为空白。但是，当我将canvas(Pic)附加到文档时，会看到结果。我在这里做错了什么？function handleFileSelect(evt) {var files = evt.target.files; // FileList objectfor (var i = 0,...

Node-chrome-canvas 使用指南

最新发布

gitblog_00902的博客

05-23

442

Node-chrome-canvas 使用指南 1. 项目介绍 node-chrome-canvas（简称 ncc）是一个开源项目，它利用 Google 的 Chrome 浏览器及其远程调试协议，为 Node.js 提供了一个完整的 HTML5 Canvas 元素及其 2D 上下文。与使用 Cairo 模拟画布的 canvas 模块不同，ncc 在浏览器环境中使用一个真实的 HTMLCanvasE...

mfc cwebbrowser2 显示.svg格式图片_绘制SVG内容到Canvas的HTML5应用

weixin_39608398的博客

12-01

353

SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接...

chrome中h5新特性canvas的drawImg无法显示

yingzizizizizizzz的专栏

02-15

1130

按照书上的内容敲的代码，竟然chrome中显示不出来后来在firefox中试了试，完全可以啊，于是百度发现由于image加载是异步的图片还没加载完我就画了，所以显示不出来 var cxt3= c.getContext("2d"); var img= new Image(); img.src= "wz.png"; cxt3.drawImage(img,0,0,50

谷歌浏览器canvas画图片不显示问题解决

u013285483的专栏

08-02

2430

$(function() { var $my_canvas=$("#myCanvas"); var my_canvas=$my_canvas[0]; var context=my_canvas.getContext("2d"); // var footprint_img=document.getElementById("footprint")

HTML5 Canvas初学者指南：绘图基础与Context详解

这个元素是HTML5规范的一部分，虽然规范仍在不断发展中，但许多现代浏览器（如Firefox 3+、Safari 4、Chrome 2.0+）已经对其提供了良好的支持。在HTML文档中，<canvas>标签用于声明一个画布区域，你可以将其想象成...

HTML5 Canvas：绘制字符串、路径、背景与图片详解

首先，Canvas 标签是在HTML5中引入的新元素，用于创建一个可编程的绘图区域，它表现为一个矩形空白区域，通过width和height属性设置其尺寸。例如： ```html <canvas id="canvas" width="600" height="400"></canvas...

WebView加载网页时出现“Sorry,you browser seems not to support the HTML 5 canvas element ”

weixin_34088838的博客

01-08

578

webView=(WebView)findViewById(R.id.webshow); webView.loadUrl(urlString); 出错代码。什么是 Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。如果您计划使用Ja...

html5学习笔记1

code旅行者的专栏

01-07

1745

Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(0,50); cxt.lineTo(70,80);

Canvas

到你如愿那天

12-02

1028

前言 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。 浏览器支持 Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>, Internet Explorer 从 IE9 开始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。基础使用创建一个画布（Canvas） <canvas id="myCa

Using Multiple HTML5 Canvases as Layers

logcabin的专栏

08-29

1054

Here's the source code. This example is coded for readability and not for optimized operation. All you need is a text editor like notepad, a copy of the image city.png (rightclick and save it) and an

go.js的基本使用(主要是vue,react同理)

luofei_create的博客

09-28

6768

go.js的基本使用，在vue中使用go.js完成业务逻辑，解析部分文档内容，代码中有详细注解

H5中的Canvas画布

weixin_45214220的博客

11-28

772

canvas用法： H5中新增的元素，只是创造了一个固定大小的画布，需使用js脚本来进行绘制画布默认宽高：默认宽高为300px*150px，可通过 <canvas class="cav" width="400px" height="450px"></canvas> 调整大小，如在样式表中设置画布的宽高，会失帧。 canvas 元素本身是没有绘图能力的，绘制图需要在 JavaScript 内部完成： var canvas = document.getElementsByTa

使用 HTML5 的＜canvas＞元素与 JavaScript 结合来绘制文本

BLOG域名:programb.blog.youkuaiyun.com

06-27

411

然后，我们使用 JavaScript 获取了这个元素的上下文（getContext('2d')），这样我们就可以在上面绘制图形和文本了。这个方法的第一个参数是要绘制的文本，第二个和第三个参数分别是文本的 x 和 y 坐标（相对于画布的原点）。然而，你可以使用 HTML5 的元素与 JavaScript 结合来绘制文本。请注意，如果你的浏览器不支持元素，那么会显示 Your browser does not support the HTML5 canvas tag. 这段文本。

chrome浏览器canvas画图不显示

09-10

977

问题产生在学习cabvas给画布画图像的时候发现使用IE edge浏览器可以正常显示图像，而chrome则不行，经百度后知道是因为chrome浏览器会先加载javascript代码，之后才加载图片，这样就造成了我是用drawImage的时候那个图片并没有加载出来。解决办法把画图片到canvas的代码放在在image对象上onload事件中image.onload = function()...

关于HTML5那些事儿1

qq_34339630的博客

08-17

497

HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。编者注：W3C 指 World Wide Web Consortium，万维网联盟。编者注：WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML