应该是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绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
html5 canvas绘制射箭小游戏下载 html5 canvas绘制射箭小游戏下载
html5 canvas自动绘制背景图片效果代码 html5 canvas自动绘制背景图片效果代码
html5 canvas绘制3D地球旋转动画特效
html5 canvas 绘制动态心电图,根据医院里的一模一样。 html5 canvas 绘制动态心电图,根据医院里的一模一样。
html5结构图canvas绘制组织结构图框架代码 html5结构图canvas绘制组织结构图框架代码
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果,google了半天未果。此时有些许绝望。突然想到了,为什么不去它的 官网 看看呢。于是乎我在官网上看到了下面的内容。 Limitations All ...
html5 canvas绘制沙丁鱼群动画特效
这是一款纯CSS3漩涡样式的Loading加载动画和CSS3发光线条旋转Loading加载动画,支持动态调节动画参数。
使用HTML5 Canvas绘制 3D房间模型和人物动画特效
ECG html canvas绘制心电图
html5 canvas绘制孙悟空猴哥来拜年特效 html5 canvas绘制孙悟空猴哥来拜年特效
html5 canvas绘制曲线动画特效.zip
html5 Canvas绘制2D背景
js HTML5 canvas绘制图片的方法.docx
html5 canvas绘制有趣的情绪表情动画特效
HTML5 Canvas绘制绿色激光射线动画特效,密集交错的3D激光线条跟随鼠标移动改变方向。
HTML5_canvas动态画出视图树,HTML5_canvas绘制动态树视图 类似结构图的形式,点击新增节点即可以自动生成 树状图形,可通过删除节点删除树节点。