结果：

代码：

<!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. CSS 中文字体 Unicode 编码表

    CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...

  2. PAT 天梯赛 L1-011. A-B 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-011 AC代码 #include <iostream> #include <cstdio&g ...

  3. 2018 ACM 国际大学生程序设计竞赛上海大都会 F - Color it (扫描线)

    题意:一个N*M的矩形,每个点初始都是白色的,有Q次操作,每次操作将以(x,y)为圆心,r为半径的区域涂成黑点.求最后剩余白色点数. 分析:对每行,将Q次操作在该行的涂色视作一段区间,那么该行最后的白 ...

  4. SqlHelper简单实现（通过Expression和反射）7.MySql数据处理类

    MySql的数据处理类和Sql Server没有太大差别,从思路上来说没有区别,所以此处只是给出代码,不再多加解释了. using System; using System.Configuration ...

  5. dogo 官方翻译 Ajax with dojo/request

    require(["dojo/request"], function(request){ request("helloworld.txt").then( fun ...

  6. case的嵌套使用

    case分支语句的格式如下: case $变量名 in 模式1) 命令序列1 ;; 模式2) 命令序列2 ;; *) 默认执行的命令序列     ;; esac case语句结构特点如下: 1.    ...

  7. linux命令（6/9）：watch命令

    watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行.在Linux下,watch是周期性的执行下个 ...

  8. 20165101刘天野 2017-2018-2 《Java程序设计》 结对编程练习_四则运算（第二周）

    20165101刘天野 2017-2018-2 <Java程序设计> 结对编程练习_四则运算(第二周) 一.需求分析 能随机生成n道四则运算题目,n由使用者输入 支持分数运算 支持多运算符 ...

  9. netbeans等宽字体却不支持中文

    一直用netbeans,各方面都很满意,就是这字体十分不爽,如用等宽字体却不支持中文,百度了一下,找到了解决办法,贴出来,给需要的朋友. 01.找到自己java字体目录.我的目录是[C:\Progra ...

  10. DataStage系列教程 （Pivot_Enterprise 行列转换）

    有人提到Pivot_Enterprise这个组件,之前没有用过,今天捣腾了会,写下来供以后参考,如果有什么不对的,还请多指出,谢谢! Pivot_Enterprise主要用来进行行列转换. 1 示例 ...