初次学习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. [转帖]你不曾见过的国产CPU：可能是最全的龙芯系列芯片家谱（下）

    你不曾见过的国产CPU:可能是最全的龙芯系列芯片家谱(下) https://www.ijiwei.com/html/news/newsdetail?source=pc&news_id=7177 ...

  2. [转帖]订购微软Windows 7延长支持服务的报价曝光 第三年要价两百美金

    订购微软Windows 7延长支持服务的报价曝光 第三年要价两百美金 cnbeta 年2月份的新闻 https://www.cnbeta.com/articles/tech/815885.htm 微软 ...

  3. Docker下mysql容器开启binlog日志(保留7天)

    现有需求开启用Docker容器启动的mysql数据库的binlog,以作为 日志记录 和 数据恢复,我们了解了MySQL的binlog日志的开启方式以及binlog日志的一些原理和常用操作,我们知道, ...

  4. java xml解析方式(DOM、SAX、JDOM、DOM4J)

    XML值可扩展标记语言,是用来传输和存储数据的. XMl的特定: XMl文档必须包含根元素.该元素是所有其他元素的父元素.XML文档中的元素形成了一颗文档树,树中的每个元素都可存在子元素. 所有XML ...

  5. 【AtCoder】AGC034

    AGC034 刷了那么久AtCoder我发现自己还是只会ABCE(手动再见 A - Kenken Race 大意是一个横列,每个点可以跳一步或者跳两步,每个格子是空地或者石头,要求每一步不能走到石头或 ...

  6. Linux(CentOS7)系统中部署Django web框架

    1. 概述 部署django和vue架在逻辑上可以分为web层与数据库层:web前端通过实现了WSGI协议的模块对python代码进行解析,而python代码中则通过特定于数据库的操作接口对数据库进行 ...

  7. 【hash表】收集雪花

    [哈希和哈希表]收集雪花 题目描述 不同的雪花往往有不同的形状.在北方的同学想将雪花收集起来,作为礼物送给在南方的同学们.一共有n个时刻,给出每个时刻下落雪花的形状,用不同的整数表示不同的形状.在收集 ...

  8. luogu2858奶牛零食题解--区间DP

    题目链接 https://www.luogu.org/problemnew/show/P2858 一句话题意: https://cn.vjudge.net/problem/POJ-3186#autho ...

  9. FFmpeg里面的时间单位

    pts单位:1/90 ms(每个单位代表1/90 ms)  RTP包头有个STAMP 对于视频 STAMP/90 就是 PTS (毫秒) 对于音频 STAMP/samplerate * 1000 才是 ...

  10. js之数据类型（对象类型——单体内置对象——JSON）

    JSON(Java Script Object Notation)使用JavaScript语法,是用于存储和传输数据的格式,通常用于服务端向网页传递数据.JSON格式仅仅是一个文本,文本可以被任何编程 ...