`

html 5 canvas绘制图片不能显示(需要重新加载地址栏enter才能显示的问题)

 
阅读更多
应该是canvas第一次绘图的时候图片还没来得及加载
修改:
1. canvas 的绘制方法不要放在jquery 的 ready方法里, 移入到body 的onload方法中;
2. canvas img直接绘制不要放在img对象的onload中,如下
/* dirImg.onload=function(){ 
ctx.drawImage(dirImg, x2, y2);     
}; */
ctx.drawImage(dirImg, x2, y2);
3. 在html中强制载入图片一次, 如下

<!-- 强制加载一次所需要的图片,防止第一次没有图片的情况 -->
<div style="display: none">
<img alt="red" src="${basePath}/resource/image/warning_yellow.png"/>
<img alt="red" src="${basePath}/resource/image/warning_red.png"/>
</div>
分享到:
评论

相关推荐

    HTML5 Canvas 3D跳动Loading加载动画-可调节参数

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行2D和3D图形绘制,提供了丰富的API来创建交互式和动态的视觉效果。在这个特定的案例中,"HTML5 Canvas 3D跳动Loading加载动画-可调节参数"是一个...

    html5 canvas粒子动画进度条加载特效

    在这个“html5 canvas粒子动画进度条加载特效”中,我们主要探讨的是如何利用Canvas API来构建一种创新的加载动画,这种动画不仅具有线条边框风格,还能以百分比形式展示加载进度。 首先,Canvas API是HTML5提供的...

    html5 canvas 绘制的视频播放控制条

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个项目中,我们利用HTML5 Canvas来实现一个自定义的视频播放控制条,以此替换HTML视频元素默认的...

    HTML5 canvas绘制流程图

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...

    html5 canvas自动绘制背景图片效果代码

    在这个"html5 canvas自动绘制背景图片效果代码"示例中,我们将探讨如何利用Canvas API实现背景图片的动态加载和绘制。 首先,我们需要在HTML文件中创建一个`&lt;canvas&gt;`元素,并为其分配一个ID,以便通过JavaScript来...

    Html5_Canvas绘制动态心电图

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。在这个“Html5_Canvas绘制动态心电图”的项目中,我们将探讨如何利用Canvas API来模拟医院中常见的...

    解决htmlcanvas手机无法截图或者截图不全的问题

    HTMLCanvas元素是HTML5引入的一个强大特性,它允许我们在网页上进行动态图形绘制,而html2canvas库则是基于这个特性实现的一个JavaScript库,用于将HTML元素转换为Canvas图像,进而可以将其导出为图片,例如JPEG、...

    html5 canvas绘制管道里跳动小球动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D图形和动画。"html5 canvas绘制管道里跳动小球动画特效"是一个利用Canvas API实现的典型应用场景,旨在创建一...

    html5结构图canvas绘制组织结构图框架代码

    Canvas通过JavaScript API提供了丰富的图形绘制功能,使得开发者无需依赖Flash或其他插件就能创建复杂的2D图形,包括组织结构图。本框架代码就是利用HTML5的Canvas元素来绘制组织结构图。 组织结构图是一种展示公司...

    html5 canvas绘制3D地球旋转动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的视觉效果。在这个“html5 canvas绘制3D地球旋转动画特效”中,我们将深入探讨如何利用HTML5 Canvas API来创建一个逼真...

    html5 canvas 图片压缩

    接下来,我们加载图片到Canvas中,通常使用`Image`对象: ```javascript var img = new Image(); img.src = 'your-image-url'; img.onload = function() { // 在这里处理图片 }; ``` 图片压缩的核心在于将图片...

    html2canvas关于图片不能正常截取的解决方案

    但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果,google了半天未果。此时有些许绝望。突然想到了,为什么不去它的 官网 看看呢。于是乎我在官网上看到了下面的内容。 Limitations All ...

    HTML5 Canvas绘制转盘抽奖

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行图形绘制,提供了丰富的绘图API,使得动态和交互式的视觉效果得以实现。在这个"HTML5 Canvas绘制转盘抽奖"项目中,我们将深入探讨如何利用Canvas ...

    使用HTML5 Canvas绘制 3D房间模型和人物动画特效

    HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上直接用JavaScript绘制2D和3D图形。在"使用HTML5 Canvas绘制3D房间模型和人物动画特效"这个主题中,我们将深入探讨如何利用Canvas技术构建逼真的3D环境,...

    HTML5 Canvas绘制时钟

    HTML5 Canvas是一个强大的Web绘图工具,允许开发者在网页上直接进行图形绘制,无需借助Flash或其他插件。这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将...

    ECG html canvas绘制心电图

    ECG html canvas绘制心电图

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    HTML2canvas是一个JavaScript库,它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像,从而能够进一步将这些图像...开发者需要理解其工作原理,合理处理滚动页面和兼容性问题,才能在实际项目中发挥出它的价值。

    html2canvas案例解决模糊不清及滚动下拉问题(已测试,可直接应用到项目中)

    解决方法是手动调整图片的大小,使其在Canvas上显示时与原始尺寸相同。 3. **CSS3效果**:某些CSS3效果,如阴影、渐变,可能无法在Canvas上完美呈现,导致模糊。可以考虑移除这些效果,或者使用纯色替代。 **二、...

    Html5_Canvas绘制心电图

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,无需依赖Flash或其他插件。在“Html5_Canvas绘制心电图”这个主题中,我们将深入探讨如何使用Canvas API来创建一个模拟心电图(ECG...

Global site tag (gtag.js) - Google Analytics