初次学习canvas，用来做笔记记录下遇到的问题及解决方案

这里是要将一张图片写到canvas里，按照网上搜索，初写了段代码，可是却没显示，以为是路径问题，不能跨域名使用，后来改为相对路径后，仍然无效，如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src="./ws.jpg" alt="" style="width: 100px;" id="imgDom">

    <canvas id="myCanvas" width="" height="">Your browser does not support the HTML5 canvas tag.</canvas>

    <script>

        var can = document.getElementById("myCanvas");

        var ctx = can.getContext("2d");

        var imgDom = document.getElementById("imgDom");

        ctx.drawImage(imgDom, , );

    </script>

</body>

</html>

后来经过搜索发现，是加载顺序的原因，很简单对不对？在图片没加载完的时候，不会调用drawImage方法，上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src="http://static.huibuy.shop/tuiguang/zaozhuang/img1.jpg" alt="" style="width: 100px;" id="imgDom">

    <canvas id="myCanvas" width="" height="">Your browser does not support the HTML5 canvas tag.</canvas>

    <script>

        var can = document.getElementById("myCanvas");

        var ctx = can.getContext("2d");

        var imgDom = document.getElementById("imgDom");

        imgDom.onload = function() {

            ctx.drawImage(imgDom, , );

        }

    </script>

</body>

</html>

发现两段代码的不同了么，就是img标签上多了一个onload事件

canvas drawImage图片不显示问题的更多相关文章

  1. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  2. canvas drawImage方法不显示图片的解决方案

    先复习一下用法: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 各个参数说明: 参数 描述 img 规定要使用的图像.画布 ...

  3. HTML5 Canvas 绘制图片不显示的问题

    问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...

  4. Canvas中 drawImage绘制图片不显示

    在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...

  5. 使用canvas 的api 实现 图片的显示 及 压缩

    在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...

  6. canvas调用scale或者drawImage图片操作后，锯齿感很明显的解决

    <script type="text/javascript"> //解决canvas画画图片 var mengvalue = -1; var phoneWidth = ...

  7. 赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

  8. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

  9. Canvas 实现图片剪切

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

随机推荐

  1. <cctype>的用法

    #include<cctype> 1.isalnum() 检查字符c是十进制数还是大写还是小写字母.如果是,则返回true:如果不是,则返回false. 2.isalpha() 检查字符c ...

  2. libtool

    [从网上摘录的,忘了从哪摘的了]   libtool常见于autoconf/automake,单独用的例子很少,所以我想仔细研究一下,为将来兄弟们看起来方便. 一.libtool的作用offer a ...

  3. XSSFWorkbook对象 进行zip打包时 用write资源流自动关闭处理办法

    XSSFWorkbook对象的write方法内会将传入的资源流自动关闭 导致下载excel失败 错误代码 OutputStream out = response.getOutputStream(); ...

  4. 在win下开发的项目怎么迁移到linux下面才能正常运行?

    我可以直接拷贝项目目录到linux下面直接操作吗? 答案: 可以,咋可能??? 为啥??? win开发直接拷贝过去,你不凉谁凉了,我以前也同样的单纯,如果你项目里用的绝对路径! 那恭喜你,你凉了,清楚 ...

  5. golang数据基本数据类型和string类型的转换

    基本类型之间的转换 golang在不同类型的变量之间赋值时需要显式转换,也就是说golang中数据类型不能自动转换. 表达式T(v)将值v转换为类型T 1.数据类型的转换可以是从范围小——>范围 ...

  6. Spring Boot：上传文件大小超限制如何捕获 MaxUploadSizeExceededException 异常

    Spring Boot 默认上传文件大小限制是 1MB,默认单次请求大小是 10MB,超出大小会跑出 MaxUploadSizeExceededException 异常 spring.servlet. ...

  7. 浅谈hashcode

    哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...

  8. [转载]目标检测-Selective Search

    [转载]目标检测-Selective Search 转载纯粹是因为这篇写的很好,mark一下: https://zhuanlan.zhihu.com/p/27467369

  9. ORACLE数据库 自动备份 定时计划任务 windows

    疑问为什么没有输入oracle 的数据库安装目录就能直接备份呢,可能是因为oracle默认安装c盘,在docs命令直接能操作吧,不信可以使用sqlplus试试. 一共分三步: 一.建立一个.bat 批 ...

  10. Vector、HashTable线程不安全示例

    下面这样写法是Vector线程不安全的写法: import java.util.Vector; public class Test { private static Vector<Integer ...