结果：

代码：

<!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. UVALive 6911 F - Double Swords

    思路:1.把所有有长度的剑看做点.Ai点是肯定要取.然后求另一把剑. 先对右区间排个序,然后每次看这个区间范围内有没有剑,如果没有就添加一把(值为右端点的剑): 如果有并且数量为1且这条龙的Ai等这把 ...

  2. 使用Vue.js初次真正项目开发-2018/07/14

    一.组件化 使用Vue.js进行开发,按照MVVM模式,围绕数据为核心,进行开发. 开发过程根据业务和功能组件化,组件化一方面让我们开发思路更加清晰,另一方面对于数据的处理和控制变得更加简单,毕竟一个 ...

  3. 20145219 《Java程序设计》实验三 敏捷开发与XP实践

    20145219 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 敏捷开发与XP 1.敏捷开发(Agile Development)是 ...

  4. tomcat启动时出现There are no resources that can be added or removed from the server

    对要部署的项目右键---Properties---Myeclipse---选中Dynamic Web Module 和 Java 应该是项目自己的setting文件夹下的描述信息和.project文件 ...

  5. Linux服务器配置秘钥对连接

    [root@check2 ~]# ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to sa ...

  6. 为JAXB和response设置编码，解决wechat4j中文乱码

    如果有哪一个做程序员的小伙伴说自己没有遇到中文乱码问题,我是不愿意相信的.今天在做微信订阅号的智能回复时,又一时迷乱的跳进了中文乱码这个火坑.刚解决问题时,都欢呼雀跃了,完全忘记了她曾经带给我的痛苦. ...

  7. LINUX系统运行查看

    1.查看内存使用情况 free -m 2.查看内存,cpu等使用情况排序,使用ps -aux命令 ps -aux --sort=+rss :按内存升序排列 ps -aux --sort=-rss :按 ...

  8. Spring注解(事务)

    spring操作数据库 jdbc <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc --> & ...

  9. Oauth2.0认证原理

    Oauth2.0 认证协议 Oauth2.0 应用场景: 微信联合登录     授权管理 互联网开放平台互相调用保证安全 微信提供api  给toov5调用  然后就可以获取一些微信的信息  比如微信 ...

  10. vim与shell终端操作技巧

    一.快速注释多行代码 1.添加//注释符 :10,50s#^#//#g       使用#作为分隔符 2.删除//注释符 :10,50s#^//##g       使用#作为分隔符 3.添加#注释符 ...