结果：

代码：

<!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. beego——参数配置

    beego目前支持INI.XML.JSON.YAML格式的配置文件解析,但是默认采用了INI格式解析,用户可以通过简单的配置就可以获得很大的灵活性. 一.默认配置解析 beego 默认会解析当前应用下 ...

  2. Memcached基础介绍

    1.memcached是什么,有什么作用? )memcached是一个开源的.高性能的内存的缓存软件,从名称上看mem就是内存的意思,而cache就是缓存的意思. )memcached通过在事先规划好 ...

  3. Python（文件处理）

    二.基本操作 #r''------------------>> r:原生字符串,不判断符号的含义#文件处理 f=open(r’c:\a.txt’,’r’,encoding=’utf-8’) ...

  4. IO阻塞模型 非阻塞模型

       IO阻塞模型(blocking IO) 在linux中,默认情况下所有的socket都是blocking,一个典型的读操作流程大概是这样:  所以,blocking IO的特点就是在IO执行的两 ...

  5. 用Tchromium替代webbrowser提交网页表单有关问题

    用Tchromium替代webbrowser提交网页表单有关问题   提交表单时,使用js脚本,然后用 chrm.browser.Frame['ff'].ExecuteJavaScript 提交就可以 ...

  6. 腾讯天猫经常出现这些低级的bug！

    对于程序员来说,bug很讨厌.每天重复着写代码.找bug.修改bug的动作.按理说互联网巨头的产品,bug应该比较少.但是实际上,无论是用百度.天猫.谷歌等产品,经常都会出现这些低级的bug,让人很火 ...

  7. LeetCode：验证二叉搜索树【98】

    LeetCode:验证二叉搜索树[98] 题目描述 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当 ...

  8. web标准的理解

    首先,什么是web标准?web标准是w3c组织为解决跨浏览器兼容问题而推出的关于网页开发时应遵守的规范.在网页的四个部分中网页的内容是由网页开发者自己定义的,因此这一部分无法标准化,而网页的结构(HT ...

  9. html 基础 超链接

    ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 在定义这些状态时,有一个顺序l v ...

  10. linux redhat下oracle11G安装

    首先由于使用的是虚拟机,所有要修改ip 在LINUX下修改IP分为二种情况, 1.调试时修改IP,仅在当前生效,重启后恢复为原有IP ifconfig eth0 192.168.63.27 netma ...