结果：

代码：

<!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. Python（名称空间、函数嵌套、函数对象）

    一.名称空间: 名称空间 定义:存放名字和值的绑定关系       内置名称空间 python自带的名字,如print.int.str 解释器启动就会生效   全局名称空间 文件级别定义的名字,都会放 ...

  2. Sql case when 小例

    SELECT I.uname, C.consume, O.name,O.dis_count,O.memberType, D.name,D.dis_count,D.up,D.down, CASE WHE ...

  3. Unity，自带Random函数，上下限注意的地方

    Random.Range() 该函数有两个重载,分别是 float和 int 的,这两者还是有差别的,具体是: float型,随机值涵盖: 最小和最大值 Random.Range(0f,1f) 是有可 ...

  4. Unity,android和IOS 防止八门神器注入

    八门神器主要是不断筛选,来获取关键属性(比如金币)在内存中的地址,再根据该地址来修改指向的数据就可以成功. 因此,我们需要在金币读取和设置的时候,使用一个偏移量,来达到干扰的目的就可以了 未经仔细测试 ...

  5. Hadoop2.7.x中所有的DataNode都启动不了解决办法

    参考:Hadoop集群所有的DataNode都启动不了解决办法说明现象:我自己出现这个问题的原因是:自己在namenode格式化之后创建了一些文件,然后重新执行了namenode格式化导致的. 现象就 ...

  6. git常用命令【转】

    先上一个git常用命令图片 Git配置 1 2 3 4 5 6 7 8 9 git config --global user.name "robbin"   git config ...

  7. jQuery鼠标滑动切换焦点图

    在线演示 本地下载

  8. python 异常的引发和捕捉处理

      1.什么是异常(exception): 异常是python发现某个地方出现逻辑错误时,抛出一个信号,即异常的引发.如果有捕捉语句在,则异常信号被捕捉,如果没有则会传递到默认异常处理器(终止程序). ...

  9. git常用的语句

    下面总结出开发中常用的指令: 1.git init:初始化git仓库 2.git add 文件名:把文件添加到暂存区中 3.git commit -m "提交信息":提交暂存区内容 ...

  10. Windows7中pagefil.sys和Hiberfil.sys文件删除与转移

    第一步.在开始的功能表的搜索栏里输入 cmd,然后在搜索结果中的 cmd 按下右键,点选[以系统管理员身分运行] 第二步.在命令提示符窗口里输入下面命令然后按下Enter: powercfg –h o ...