<!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. （cmath）关于头文件cmath

    关于头文件cmath // -*- C++ -*- C forwarding header. // Copyright (C) 1997-2014 Free Software Foundation, ...

  2. Shell环境变量与特殊变量详解

    1)变量类型 1)变量可分为俩类:环境变量(全局变量),和普通变量(局部变量), 环境变量也称为全局变量,可以在创建他们的Shell及其派生出来的任意子进程Shell中使用,环境变量又可以分为自定义环 ...

  3. 线上CPU飚高（死循环，死锁...）

    之前排除服务器内存暴增的问题,在此看到一篇类似的文章,做个类似的记录. 1.top基本使用 top 命令运行图: 第一行:基本信息 第二行:任务信息 第三行:CPU使用情况 第四行:物理内存使用情况 ...

  4. Java语言简介

    Java即计算机编程语言 1.概念 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Jav ...

  5. stm32 nucleo系列开发板的接口

    1. 首先说的是 Arduino接口,所有的nucleo系列都支持这个接口,而且像F767这种尺寸长的板子也有的,不过是双排排针,其实就是外侧也是 Arduino接口 2. 板子接上电脑之后有个串口

  6. 创龙DSP6748开发板上电测试-第一篇

    1. 创龙DSP6748开发板测试.2980元的售价很高,我估计新的1200元比较合适,当然创龙定价是按照供需关系的.仿真器XDS100V2卖598元,真是狮子大张口. 2. 上电是5V-2A的电源. ...

  7. #3.14 Piday#我的圆周率日

    本文来自网易云社区 作者:马宝 圆周率日(Pi day) 2011年国际数学协会正式宣布,将每年的3月14日设为国际数学节,来源则是中国古代数学家祖冲之的圆周率."终极"圆周率日是 ...

  8. hive和关系型数据库

    1)hive和关系型数据库存储文件的系统不同.  hive使用hdfs(hadoop的分布式文件系统),关系型数据库则是服务器本地的文件系统: 2)hive使用的计算模型是mapreduce,而关系型 ...

  9. docker in docker

    docker run --rm可以从一个镜像启动容器,并在容器执行完成后自动删除,这在计算任务中非常有用. 例如,我们通过以下步骤完成计算任务容器的启动: 1 将输入数据通过卷挂载方式连接到计算任务容 ...

  10. Linker加载so失败问题分析

    WeTest 导读 近期测试反馈一个问题,在旧版本微视基础上覆盖安装新版本的微视APP,首次打开拍摄页录制视频合成时高概率出现crash. 那么我们直奔主题,看看日志: 另外复现的日志中还出现如下信息 ...