<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. Input标签_实现限制输入字符类型(只能输入特定类型字符)

    ... <input type="text" placeholder="密码" maxlength="20" onKeyPress=& ...

  2. MIME 参考手册

    本文摘自http://www.w3school.com.cn/media/media_mimeref.asp MIME (Multipurpose Internet Mail Extensions) ...

  3. Thread线程join方法自我理解

    Thread线程join方法自我理解 thread.join():等待thread线程运行终止,指的是main-thread(main线程)必须等待thread线程运行结束,才能继续thread.jo ...

  4. Java 平时作业七

    以下是几本计算机书籍的基本信息 编号  书名         价格      出版社 1  JAVA 基础   32   清华大学出版社 2  JAVA WEB 开发  40   电子工业出版社 3  ...

  5. There/Here be句型

    (1)There/Here + (be)根据上下文, 有多种翻译方法,可以翻译成"有", "是". be动词根据后面的名词有单复数变化. There is a ...

  6. Qt5.7.0移植到4412

    搞了几天,终于把Qt5.7移植到4412上,下面是一些自己移植过程中的记录,希望能帮到其他人. 一.需要下载的文件, 下载qt5.7源码qt-everywhere-opensource-src-5.7 ...

  7. ASP.NET Core2.2 IExceptionFilter

    用vs2017建立一个ASP.NET Core Web应用程序并选择MVC框架,自动生成了 Startup的类,并配置了错误处理方式: if (env.IsDevelopment()) { app.U ...

  8. jmeter测试计划元素执行顺序

    jmeter测试计划元素执行顺序 测试计划的元素是有序的,通过以下方式执行: 1–配置节点 2–前置处理器 3–定时器 4–取样器 5–后置处理器(只在有结果可用情况下执行) 6–断言(只在有结果可用 ...

  9. python的标准数据类型

    python有5种标准的数据类型 1. number(数字) int(有符号的整形) long(长整[也可以代表八进制和16进制]) float(浮点型) complex(复数类型) 2.string ...

  10. 使用RevoUninstaller Pro卸载

    使用RevoUninstaller Pro卸载opera浏览器,操作过的注册表 HKEY_CURRENT_USER\SOFTWARE\CLASSES\Local Settings\Mircrosoft ...