<!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. vimrc 配置

    " All system-wide defaults are set in $VIMRUNTIME/debian.vim and sourced by" the call to : ...

  2. 8-IdentityServer4登录中心

    1-新建webapi  IdentityServer4服务器项目 E:\coding\netcore\IdentityServerSample>dotnet new webapi --name ...

  3. vue-router核心概念

    vue用来实现SPA的插件 使用vue-router 1. 创建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/abo ...

  4. express with bower in websotrm

    0. To install bower , run the following command in webstorm terminal(alt+f12) npm install bower bowe ...

  5. 【Hutool】Hutool工具类之Http工具——HttpUtil

    最简单最直接的上手可以参见参考文档:http://hutool.mydoc.io/?t=216015   Http协议的介绍,请参考web随笔:http://www.cnblogs.com/jiang ...

  6. 人脸检测库libfacedetection介绍

    libfacedetection是于仕琪老师放到GitHub上的二进制库,没有源码,它的License是MIT,可以商用.目前只提供了windows 32和64位的release动态库,主页为http ...

  7. clr via c#读书笔记五：常量和字段

    1.常量是值从不变化的符号.只能定义编译器识别的基元类型的常量.如:Boolean,Char,Byte,SByte,Int16,UInt16,Int32,UInt32,Int64,Single,Dou ...

  8. sublime安装php_beautifier来格式化PHP代码

    注:如果你使用sublime3,php版本是5.6以上,推荐使用这个插件phpfmt 环境 操作系统:windows7 sublime版本:2.0.2 PHP安装路径: D:\wamp\bin\php ...

  9. 使用redux-actions优化actions管理

    redux-actions的api很少,有三个createAction(s)  handleASction(s)   combineActions 主要用到createAction去统一管理actio ...

  10. Python3安装pywin32模块

    假如你安装的是Python3.6, 那么可以直接用PyCharm或者pip安装pywin32模块: 但是, 由于我安装的是Python3.7, 所以PyCharm或者pip都无法成功安装pywin32 ...