<!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. [NOIP2017]逛公园（DP）

    先spfa一遍处理出d[]数组,(从n开始bfs一遍标记可以达到n的点) 题意即,在走最短路的基础上,可以最多多走K长度的路径, 考虑DP,每次剩余可走的长度会因决策而改变,所以考虑dp[i][j]为 ...

  2. ssm中需要注意的问题

    1.在controller中需要加注解 @Controller @RequestMapping("url") @Autowired private CardService card ...

  3. Solr第一讲——概述与入门

    一.solr介绍 1.什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Serv ...

  4. java 类装饰

    package TestIo; public class Test8 { public static void main(String[] args) { System.out.println(&qu ...

  5. Java应用基础微专业-工程篇

    第1章-命令行 1.1 命令行基础 ls -a: list all files (including hidden files) .DS_Store: files detailed informati ...

  6. Redis 数据结构服务器

    Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...

  7. 反片语 （Ananagrams,UVa 156)

    题目描述: #include <iostream> #include <string> #include <cctype> #include <vector& ...

  8. HADOOP-输出数据实体类承载

    新建一个bean包: 1.实现Writerable 2.有一个空的构造方法 代码实现: import java.io.DataInput; import java.io.DataOutput; imp ...

  9. 【机器学习】多项式回归python实现

    [机器学习]多项式回归原理介绍 [机器学习]多项式回归python实现 [机器学习]多项式回归sklearn实现 使用python实现多项式回归,没有使用sklearn等机器学习框架,目的是帮助理解算 ...

  10. 基于深度学习的中文语音识别系统框架（pluse）

    目录 声学模型 GRU-CTC DFCNN DFSMN 语言模型 n-gram CBHG 数据集 本文搭建一个完整的中文语音识别系统,包括声学模型和语言模型,能够将输入的音频信号识别为汉字. 声学模型 ...