<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. 原生js实现淘宝图片切换

    这个淘宝图片切换具体效果就是:鼠标移上底部一行中的小图片,上面大图片区域就会显示对应的图片. gif图片看起来还挺酷的,其实实现很简单,用原生js绑定事件改变大图片区域的src. 上代码,html部分 ...

  2. django框架中form组件的简单使用示例：注册验证

    Django中form组件的三大特点: 1. 生成页面可使用的HTML标签 2. 对用户提交的数据进行初步校验    3. 保留上次输入内容 废话不多说,直接进入正题. 这是注册界面截图: 与上一篇a ...

  3. Problem A: 重载字符的加减法

    Description 定义一个字符类Character,只有一个char类型的数据成员. 重载它的+.-.<<和>>运算符,其中+.-的第二个操作数是int类型的整数n.“+ ...

  4. 运行Office 2007安装程序提示:"找不到Office.zh-cn\OfficeMUI.xml"(转载)亲测

    去网上查结果原来是Office 2007和Visual Studio 2008 Authoring Component组件相冲突,网上说用VS.Net 2008光盘WCU\WebDesignerCor ...

  5. Mantis：Mantis rest api url 404 Not Found.解决过程纪录

    测试Mantis rest api时碰到的问题:404 Not Found. 根据文件,Mantis rest api的预设url是{{url}}/api/rest/{{controller}}. 其 ...

  6. /usr/lib/x86_64-linux-gnu/libopencv_highgui.so：对‘TIFFReadRGBAStrip@LIBTIFF_4.0’未定义的引用

     LIBRARIES += boost_thread stdc++ boost_regex     https://github.com/rbgirshick/fast-rcnn/issues/52

  7. pytest自动化1：兼容unittest代码实例

    初级版本 源码: #!/usr/bin/env python # -*- coding:utf-8 -*- #使用车管家的接口实际调用类函数 import unittest from urllib i ...

  8. spyder常用功能

    最近和同学讨论到spyder的使用技巧,所以就结合之前在网上看到网友的总结( https://blog.csdn.net/peiwang245/article/details/78528098)和自己 ...

  9. Python第二章（北理国家精品课 嵩天等）

    一.深入理解Python语言 语法简洁 >13万第三方库 二.Python蟒蛇绘制 #PythonDraw.py import turtle turtle.setup(650,350,200,2 ...

  10. python学习-序列基本知识

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 用到的主要序列有元组和列表. 先定义一个列表 names=[&q ...