canvas drawImage 不显示

<!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 不显示的更多相关文章

<canvas>drawImage()方法无法显示图片
在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...
canvas drawImage图片不显示问题
初次学习canvas,用来做笔记记录下遇到的问题及解决方案这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...
canvas - drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等. 问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...
canvas drawImage方法不显示图片的解决方案
先复习一下用法: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 各个参数说明: 参数描述 img 规定要使用的图像.画布 ...
Canvas DrawImage截取和压缩图片的陷阱
html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...
canvas drawImage异步特性
先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
Canvas drawImage API
drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
canvas.drawImage()方法详解
首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...
FileReader 与canvas结合使用显示图片
话不多少,直接上代码 function fileChange() { var file = this.files[0]; var imageType = /^image\//; //是否是图片 if ...

随机推荐

HTTPS相关知识以及在golang中的应用
最近简单学习了HTTPS,并在golang中实践了一下,现在把学到的知识记录下来,方便以后查看,如果有幸能帮到有需要的人就更好了,如果有错误欢迎留言指出. 一些简单的概念,可以自行百度百科 HTTPS ...
[Real World Haskell翻译]第20章 Haskell系统编程
第20章 Haskell系统编程到目前为止,我们已经讨论了大多数的高层次的概念.Haskell也可以用于较低级别的系统编程.很可能是用haskell编写出底层的与操作系统接口的程序. 在本章中,我们 ...
北京Uber优步司机奖励政策（1月11日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
[python]PyCharm安装与激活
一.安装 1.去官网下载安装包(http://www.jetbrains.com/pycharm/download/#section=windows) 2.下载完成之后双击即可点击安装,按照自己需求选 ...
ORB-SLAM（九）LocalMapping
LocalMapping作用是将Tracking中送来的关键帧放在mlNewKeyFrame列表中:处理新关键帧,地图点检查剔除,生成新地图点,Local BA,关键帧剔除.主要工作在于维护局部地图, ...
PHP中strtotime()的使用
strtotime是一个非常强大的函数. 传入的参数,详见官网的介绍本月最后一个周日 echo date('Y-m-d',strtotime('last sunday of this month') ...
Git 新建文件并提交
1.创建一个readme.txt. cd /home/cyp/learngit touch readme.txt vim readme.txt 编写内容, wq 保存推出 2.提交步骤 2.1 gi ...
Linux命令应用大词典-第18章磁盘分区
18.1 fdisk:分区表管理 18.2 parted:分区维护程序 18.3 cfdisk:基于磁盘进行分区操作 18.4 partx:告诉内核关于磁盘上分区的号码 18.5 sfdisk:用于L ...
Unity OBB分包(基础APK+OBB) 与apk签名
1.OBB (Opaque Binary Blob)文件格式,是安卓游戏通用数据包.在一些大型游戏上较为常见,同时还附以Data文件,亦或是md5.dat文件出现产生原因:由于某些平台对于apk上传 ...
一句话描述 Java 设计模式
Java 设计模式设计模式是对应于不同的应用目的的. 适配:将特定功能接口适配需求方桥接:面向两个接口,无关接口的实现: 抽象化与实现化解耦,使得二者可以独立变化:例:笔与图形,笔可以画图 ...

canvas drawImage 不显示

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

随机推荐

热门专题