结果：

代码：

<!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（常用模块）

    模块 模块 本质上就是一个.py文件 内置模块(解释器层面) 第三方模块(Python lib文件) 自定义模块(当前路径) 模块调用,包的概念 在计算机程序的开发过程中,随着程序代码越写越多,在一个 ...

  2. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

    jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   jQuery是继prototype ...

  3. git分支更新代码命令

    第一步: 查看状态  git status 第二步: 全部添加  git add --all 第三步: 再次查看状态  git status 第四步: 提交      git commit -m '备 ...

  4. java要注意的问题3

    十七.使用正则 正则表达式的结构摘录如下(来源: Oracle官网) 字符 x 字符x / 反斜杠 /0n 8进制值为0n的字符(0<=n<=7) /0nn   /0mnn 8进制值为0m ...

  5. CodeForces - 986A Fair (BFS+贪心)

    题意:有N个点M条边的无向图,每个点有给定的ai(1<=ai<=K,K<=200)表示该点拥有的物品编号,保证1-K在N个点全部出现.求每个点收集S个不同的物品所要走过的最短路程(边 ...

  6. 对Java的接口和抽象类 的一些了解

    学习并转载自: https://mp.weixin.qq.com/s?__biz=MzAxMzQ3NzQ3Nw==&mid=2654251476&idx=4&sn=e66ec4 ...

  7. sql developer 如何格式化sql

    1.首先  Ctrl+A  全选需要格式的sql 2.然后  Ctrl+F7 即可格式化

  8. 基于SSM的单点登陆04

    jdbc.properties JDBC_DRIVER=org.mariadb.jdbc.Driver JDBC_URL=jdbc:mariadb://127.0.0.1:3306/market JD ...

  9. MapReduce：汇总学生表和成绩表为----学生成绩表

    已知两张数据表,其中表一存储的是学生编号.学生姓名:表二存储的是学生编号.考试科目.考试成绩:编写mapreduce程序,汇总两张表数据为一张统一表格. 表一: A001 zhangsan A002 ...

  10. BUG: scheduling while atomic 分析【转】

    本文转载自:https://blog.csdn.net/cfy_phonex/article/details/12090943 遇到一个典型的schedule问题.   <3>[26578 ...