<canvas>标签相当于是一个画布，css决定画布的样式（这块画布的背景颜色、大小等），脚本（一般使用JavaScript）就是画笔，我们可以在这个画布上绘制线条、形状、文字、图片等。

<canvas>标签对中的内容会在浏览器不支持这个标签的时候（如在IE8以及更旧版本的浏览器上启动）的时候会显示出来，如果浏览器支持该标签则不会显示。

绘制图片和绘制其它内容有些不同，我对绘制图片的理解就是：将一张图片复印到这块画布上。但我们不能直接画到这块画布上，这是有原因的。

我们先来看绘制图片代码的语法：content.dragImage(image,x,y)

image：要绘制的图片。可以是<i大mg>标签中的图片；

x：图片定位点（左上角）的x轴参数；

y：图片定位点（左上角）的y周参数；

当然，语法不止这一种，这里就用这个语法来介绍一下使用该方法时要注意的一件事情。

我们先设置好画布区域和装图片的区域，像这样：

稍微设置了点样式，让这两个区域并排显示。如果你直接使用drawImage()将右边的图像插入到左边的画布上，像下面这样：

 <body>

     <div id="zone">

         <h3>画布</h3>

         <canvas id="huaBu" id="getCanvas">抱歉，您的浏览器不支持该标签</canvas>

     </div>

     <div id="zone">

         <h3>图像</h3>

         <img id="getImg" src="Img.png" style="width:300px;height:170px;" />

     </div>

     <script>

         var c = document.getElementById("huaBu");

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

         var img = document.getElementById("getImg");

         ctx.drawImage(img, 0, 0);    //直接绘制图片到画布上

     </script>

 </body>

你就会发现，什么事都没发生。

这是因为网页中图片加载是异步加载，图片还没有加载完，脚本就执行了，那它就绘制了个还没加载完的图像，一片空白。

解决方法也很简单：脚本在图片加载完毕后再执行就行了。这个时候就要用到onload事件了。

 <body>

     <div id="zone">

         <h3>画布</h3>

         <canvas id="huaBu" id="getCanvas">抱歉，您的浏览器不支持该标签</canvas>

     </div>

     <div id="zone">

         <h3>图像</h3>

         <img id="getImg" src="Img.png" style="width:300px;height:170px;" />

     </div>

     <script>

         var c = document.getElementById("huaBu");

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

         var img = document.getElementById("getImg");

         img.onload = function() {

             ctx.drawImage(img, 0, 0);    //在图片加载完毕后再执行绘制图片的操作

         }

     </script>

 </body>

这个时候画布上就绘制了我们指定的图片：

想要画布上图像的大小和原图一致，修改drawImage()的参数就好啦，比如我这里设置成这样：

ctx.drawImage(img, 0, 0,300,150);

就一样了：

在<canvas>上绘制img（drawImage()）时需要注意的事的更多相关文章

  1. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  2. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  3. 在canvas上面绘制图片--drawImage实例

    在canvas上面绘制图片--drawImage实例 关键点: 1.图片居中 2.其它 <!DOCTYPE html> <html lang="zh-cn"> ...

  4. 前端使用html2canvas截图，在canvas上绘制图片及保存图片

    1.使用html2canvas 存在的问题: 不同的机型绘制位置不同的问题. 这个主要因为Html动态设置了html的dpr.(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字 ...

  5. Android 如何将Canvas上绘制的内容保存成本地图片（转）

    效果如下图所示 保存在sd卡上的文件为 手机上显示效果为: 1>>在Manifest文件中增加相应权限 <!-- 在SDCard中创建与删除文件权限 --> <uses- ...

  6. 软件项目技术点(5)——在canvas上绘制动态网格线

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果. 下面是具体实现的代码,draw函数里计算出大 ...

  7. canvas绘制图片drawImage学习

    不得不说,html5中的canvas真的非常强大,从图片处理,到视频处理,再到游戏开发,都能见到canvas的身影,然而,就这一个<canvas>标签,功能居然如此强大,这主要归功于can ...

  8. Android中使用SurfaceView和Canvas来绘制动画

    事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...

  9. -_-#【Canvas】导出在<canvas>元素上绘制的图像

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. DevExpress VCL Controls 2019发展路线图（No.2)

    [DevExpress VCL Controls下载] ExpressQuantumTreeList Excel-inspired Filter (v19.1) 与ExpressQuantumGrid ...

  2. ykit入门

    init  lint pack server  watch 1.创建现有工程的ykit项目 在项目文件夹下 ykit init 2.lint 检查当前项目的代码质量 手动执行代码 可验证代码正误 yk ...

  3. GMT5 install

    there are two imporant modules called gshhg and dcw when installing GMT5; try to state the locations ...

  4. python之常用模块学习

    1.模块调用 import module from module import xx from module.xx.xx import xx as rename from module.xx.xx i ...

  5. jmeter 常用组件详解

    1.测试计划(test plan) 描述一个性能测试,包含本次测试所有相关功能 2.threads(users)线程 Setup thread group: 一种特殊类型的线程,可用于执行预测试操作. ...

  6. Big Txt File(一)

    对于当今的数据集来说,动不动就上G的大小,市面的软件大多不支持,所以需要自己写一个. 常见的txt文本行形式存储的时候也不过是行数多些而已,可以考虑只观测部分行的方式,基于这个思路可以搞一个大数据的浏 ...

  7. [转载] java多线程总结（三）

    转载自: http://www.cnblogs.com/lwbqqyumidi/p/3821389.html 作者:Windstep 本文主要接着前面多线程的两篇文章总结Java多线程中的线程安全问题 ...

  8. python程序在命令行执行提示ModuleNotFoundError: No module named 'XXX' 解决方法

    在ide中执行python程序,都已经在默认的项目路径中,所以直接执行是没有问题的.但是在cmd中执行程序,所在路径是python的搜索路径,如果涉及到import引用就会报类似ImportError ...

  9. Linux命令基础2-ls命令

    本文介绍的是linux中的ls命令,ls的单词是list files的缩写,意思的列出目录文件. 首先我们在admin用户的当前路径,新建一个test的文件夹,为了方便本文操作和介绍,创建了不同文件类 ...

  10. 前端axios下载excel(二进制)

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...