<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. c++ 指针、引用和取值；

    直接看代码: #include<iostream> using namespace std; int add(int *a,int *b){ int s; s = *a + *b; cou ...

  2. 背景图片利用backgrond-posintion属性实现不同形式的分割

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. jquery添加属性使用attr、prop。

    之前页面为标签添加属性都是使用的attr,删除使用removeAttr. 今天给checkbox添加checked属性时出现代码显示添加成功,但是页面不勾选内容. 后来查询发现checked是chec ...

  4. python实现文件的复制

      # 练习: # 1. 写程序,实现文件的复制,(注:只复制文件,不复制文件夹) # 要求: # 1) 要考虑文件关闭的问题 # 2) 要考虑超大文件无法一下加载到内存的问题 # 3) 要能复制二进 ...

  5. python2入门（3）

    六.python列表(List) python最常见的序列类型python列表List使用[]表示,元素之间以逗号分隔,元素类型不需要相同 内置操作: list = [1,2,3,'four'] li ...

  6. 如何使用HTML5的WebSocket实现网页与服务器的双工通信(二)

    本系列服务端双工通信包括两种实现方式:一.使用Socket构建:二.使用WCF构建.本文为使用WCF构建服务端的双工通信,客户端同样使用Html5的WebSocket技术进行调用. 一.创建WCF服务 ...

  7. 微信小程序笑话小程序实践开发学习

    首先做出笑话展示页面 1.修改app.json文件,在"pages"中添加一条 "pages/joke/joke",然后ctrl+s就可以自动创建joke文件夹 ...

  8. L2-001 紧急救援 （25 分)

    L2-001 紧急救援 (25 分)   作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快 ...

  9. 3--TestNG多线程

    第一: 注解方式 public class MultiThreadOnAnnotation{ @test(invocationCount=10,threadPoolSize=10) public vo ...

  10. linux防火墙设置常用命令

    1.永久性生效,重启后不会复原 开启: chkconfig iptables on 关闭: chkconfig iptables off 2.即时生效,重启后复原 开启: service iptabl ...