初次学习canvas，用来做笔记记录下遇到的问题及解决方案

这里是要将一张图片写到canvas里，按照网上搜索，初写了段代码，可是却没显示，以为是路径问题，不能跨域名使用，后来改为相对路径后，仍然无效，如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src="./ws.jpg" alt="" style="width: 100px;" id="imgDom">

    <canvas id="myCanvas" width="" height="">Your browser does not support the HTML5 canvas tag.</canvas>

    <script>

        var can = document.getElementById("myCanvas");

        var ctx = can.getContext("2d");

        var imgDom = document.getElementById("imgDom");

        ctx.drawImage(imgDom, , );

    </script>

</body>

</html>

后来经过搜索发现，是加载顺序的原因，很简单对不对？在图片没加载完的时候，不会调用drawImage方法，上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src="http://static.huibuy.shop/tuiguang/zaozhuang/img1.jpg" alt="" style="width: 100px;" id="imgDom">

    <canvas id="myCanvas" width="" height="">Your browser does not support the HTML5 canvas tag.</canvas>

    <script>

        var can = document.getElementById("myCanvas");

        var ctx = can.getContext("2d");

        var imgDom = document.getElementById("imgDom");

        imgDom.onload = function() {

            ctx.drawImage(imgDom, , );

        }

    </script>

</body>

</html>

发现两段代码的不同了么，就是img标签上多了一个onload事件

canvas drawImage图片不显示问题的更多相关文章

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

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

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

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

  3. HTML5 Canvas 绘制图片不显示的问题

    问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...

  4. Canvas中 drawImage绘制图片不显示

    在学习 html5中的 Canvas.drawImage时写了如下代码: <!doctype html> <html> <head><title>研究& ...

  5. 使用canvas 的api 实现 图片的显示 及 压缩

    在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...

  6. canvas调用scale或者drawImage图片操作后，锯齿感很明显的解决

    <script type="text/javascript"> //解决canvas画画图片 var mengvalue = -1; var phoneWidth = ...

  7. 赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

  8. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

  9. Canvas 实现图片剪切

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

随机推荐

  1. Python openCV基础操作

    1.图片加载.显示和保存 import cv2 # 读取图片 img = cv2.imread("img1.jpg") # 生成灰色图片 imgGrey = cv2.imread( ...

  2. bootstrap-table的一些配置参数例子

    $('#reportTable').bootstrapTable({ method: 'post', url: '/qStock/AjaxPage', dataType: "json&quo ...

  3. Windows 与 linux文件相互传输的方法

    公司里面办公机器大部分都是 windows 但是现在随着云计算.docker.linux等的越来越兴起,需要大量的操作linux服务器. 最重要和最直接的需要将windows 上面的文件上传到 lin ...

  4. 在Ubuntu中搭建Python3的虚拟环境并开始django项目

    搭建环境: 1.首先安装virtualenv: pip install virtualenv 2.创建虚拟环境:(指定安装Python3,若不写-p python3,默认安装Python2.7),en ...

  5. [HihoCoder-1424] Asa's Chess Problem

    有上下界的费用流 #include <stdio.h> #include <algorithm> #include <queue> #include <cst ...

  6. DISCO Presents Discovery Channel Code Contest 2020 Qual Task E. Majority of Balls

    Not able to solve this problem during the contest (virtual participation). The first observation is ...

  7. 超简单的js实现提示效果弹出以及延迟隐藏的功能

     自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...

  8. centos7 yum安装nginx和 编译安装tengine

    说明 我这里给大家演示一下如何安装nginx,nginx我就不多介绍了,然后我再说一点就是,安装的两种方法都可以,编译安装和yum安装,我不能每个都演示两遍呀,所以看到我这博客的你,学会举一反三好吧? ...

  9. 编写函数实现strcmp( )函数功能

    strcmp(字符串1,字符串2) 作用是比较字符串1和字符串2.两个字符串从左至右逐个字符比较(按照字符的ASCII码值的大小)(即减法比较),直到字符不同或者遇见’\0’为止 如果全部字符都相同, ...

  10. 使用 js 简单的实现 bind、call 、aplly

    Function.prototype._call = function(obj,...arg){ var me = this; var k = Symbol("test"); // ...