<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<body>

    <img src="qr.jpg" alt="">

    <canvas width="400px" height="400px">

    </canvas>

    <script>

        var c = document.getElementsByTagName('canvas')[0]

        ctx=c.getContext('2d');

        var img = new Image();

        img.src = "./qr.jpg";

        img.onload = function(){

            ctx.drawImage(img,100,100,240,164);

        }

        // var img=document.getElementsByTagName('img')[0]

        console.log(img)

        // img.src='./bar.png'

    </script>

</body>

</html>

img 要加载完成后 才能画到画布上

canvas drawImage 不显示的更多相关文章

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

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

  2. canvas drawImage图片不显示问题

    初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...

  3. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

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

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

  5. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  6. canvas drawImage异步特性

    先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. Canvas drawImage API

    drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. canvas.drawImage()方法详解

    首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...

  9. FileReader 与canvas结合使用显示图片

    话不多少,直接上代码 function fileChange() { var file = this.files[0]; var imageType = /^image\//; //是否是图片 if ...

随机推荐

  1. 两步搞定一台电脑同时开启多个tomcat

    1. 修改tomcat中的某些参数,为了避免启动tomcat时出现冲突,编辑bin/startup.bat, 在文件第一行添加如下两行(必须第一行才有效) SET JAVA_HOME=C:\webso ...

  2. mybatis入门(三):mybatis的基础特性

    mybatis的知识点: 1.mybatis和hibernate本质区别和应用场景 hibernate:是一个标准的ORM框架(Ojbect relation mapper对象关系映射).入门门槛较高 ...

  3. 北京Uber优步司机奖励政策（12月11日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 常用排序算法的C++实现

    排序是将一组"无序"的记录序列调整为"有序"的记录序列. 假定在待排序的记录序列中,存在多个具有相同的关键字的记录,若经过排序,这些记录的相对次序保持不变,即在 ...

  5. 1030: [JSOI2007]文本生成器

    1030: [JSOI2007]文本生成器 https://www.lydsy.com/JudgeOnline/problem.php?id=1030 分析: AC自动机+dp. 正难则反,求满足的, ...

  6. 跨平台编译Go程序（交叉编译）

    作用:比如你手头只有Mac系统,而你的用户有Linux和Windows的,他们也想用,你可以通过交叉编译出Linux和Windows上的可执行文件给他们用 (1)首先进入go/src 源码所在目录,执 ...

  7. join_tab计算代价

    此路不通,还是需要按照顺序进行计算

  8. 安装MySQLdb模块遭遇"fatal error: my_config.h: No such file or directory"的处理

    Issue       I encountered an error when I run the python script which need to import the module of & ...

  9. Web自动化selenium技术快速实现爬虫

    selenium是大家众所周知的web自动化测试框架,主要用来完成web网站项目的自动化测试,但其实如果要实现一个web爬虫,去某些网站爬取数据,其实用selenium来实现也很方便. 比如,我们现在 ...

  10. 前端开发工程师 - 02.JavaScript程序设计 - 期末考试

    期末考试客观题 期末考试主观题 https://www.15yan.com/story/aY0HWAQ7oNU/     1(8分) 函数myType用于根据输入参数返回相应的类型信息. 语法如下: ...