结果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>绘制图像</h3>

  <canvas id="c17" width="500" height="400"></canvas>

  <script>

    var ctx = c17.getContext('2d');

    //下述代码的执行结果输出是： 1 、 3 、 2

    var img = new Image();

    img.src = 'img/p4.png';

    console.log(1, img.width,   img.height);

    img.onload = function(){

      console.log('2 图片加载完成')

      console.log(img.width,   img.height);

      ctx.drawImage(img, 0, 0);

      ctx.drawImage(img, 500-img.width, 0);

    }

    console.log('3 JS执行完成')

  </script>

</body>

</html>

canvas 绘制图像的更多相关文章

  1. html5新特性canvas绘制图像

    在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...

  2. canvas绘制图像轮廓效果

    在2d图形可视化开发中,经常要绘制对象的选中效果. 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果.  发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述. 绘制边框 绘制 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. html5 canvas绘制圆形印章，以及与页面交互

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

  5. canvas绘制视频封面--摘抄

    一.需求:上传视频,同时截取视频某一帧作为视频的封面. 二.实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了. 三.代码: <!DOCTYPE html ...

  6. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  7. 在web中绘制图像 -- canvas篇

    汗,不小心点击发布了.其实正在编辑中...... HTML Canvas是现代浏览器中非常棒的绘图技术,Canvas可以绘制图形,操作图片,制作游戏,创建动画等:Canvas是很容易使用的,下面我们来 ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

随机推荐

  1. Java集合（4）：Iterator（迭代器）

    迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的Iterator功能比较简单, ...

  2. EXSITS应该怎么用？

    无论是做项目还是普通使用SQL,我们通常都会使用IN.因为很好理解,也很方便.但是,面对着多层查询嵌套,或者IN关键字里面的结果集数量巨大,查询的效率就会直线下降.这时候,我们应该用好EXSITS. ...

  3. CNN学习笔记：激活函数

    CNN学习笔记:激活函数 激活函数 激活函数又称非线性映射,顾名思义,激活函数的引入是为了增加整个网络的表达能力(即非线性).若干线性操作层的堆叠仍然只能起到线性映射的作用,无法形成复杂的函数.常用的 ...

  4. JavaScript：关闭当前页面（微信、电脑）

    WeixinJSBridge.call('closeWindow'); // 关闭微信浏览器 window.opener=null; window.open('','_self'); window.c ...

  5. python+selenium+API

    一.浏览器操作 1.浏览器最大化 driver.maximize_window() #将浏览器最大化显示 2.设置浏览器宽.高 driver.set_window_size(480, 800)#设置浏 ...

  6. hive--udf函数（开发-4种加载方式）

    UDF函数开发 标准函数(UDF):以一行数据中的一列或者多列数据作为参数然后返回解雇欧式一个值的函数,同样也可以返回一个复杂的对象,例如array,map,struct. 聚合函数(UDAF):接受 ...

  7. 什么时候需要用super

    1.子类构造函数调用父类构造函数用super 2.子类重写(覆盖)父类方法后,若想调用父类中被重写的方法,用super 3.未被重写的方法可以直接调用.

  8. 周立功CAN-II引脚图

    注意:如果需要两个CAN通道通信,直接用杜邦线将L连L,H连H,地连地就行(3.6引脚已做短接处理),不需要反接

  9. mkfs.ext4 磁盘分区

    在linux上格式化一个磁盘分区时,出现如下错误 root@d:~# mkfs.ext4 /dev/sdb1 mke2fs 1.41.12 (11-May-2015) mkfs.ext4: inode ...

  10. [转] Android Fragment 你应该知道的一切

     转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42628537,本文出自:[张鸿洋的博客] 很久以前写过两篇Fragment的介 ...