结果：

代码：

<!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中,我们有7种运算符:算术运算符.关系运算符.赋值运算符.逻辑运算符.位运算符.成员运算符.身份运算符 我们有7个算术运算符,能让我们对数值进行算术计算 1.加号(+),将两个值相加 2 ...

  2. UVALive 6915 J - Leveling Ground

    思路: 简单模拟下.从左向右扫描一次,求出挖出该区间空地的花费,并取个最小值即可. 至于怎么求区间内的高度最小值,就用线段树就好了. #include <bits/stdc++.h> #d ...

  3. 理解display中的box-flex属性

    今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局,要求页面效果如下: 在实现这种页面布局时,他使用了display:box-flex,下面是相应的代码: css2 方式 <! ...

  4. netty5----心跳

    netty3心跳: package com.heart; import java.net.InetSocketAddress; import java.util.concurrent.Executor ...

  5. QT5.6.0 鼠标支持

    QT5用QPA换了QWS之后,USB鼠标就不知道怎么支持,网上搜啊搜,各种尝试,终于可以了. export TSLIB_ROOT=/mnt/sdcard/tslib export TSLIB_PLUG ...

  6. 配置windows qt开发环境

    1.解压缩MinGW-gcc440_1.zip.将解压后的文件夹复制至C盘根目录下.2.安装qt-creator-win-opensource-2.5.2.3.安装qt-win-opensource- ...

  7. 《Pro Git》第2章 Git基础

    1.获取Git仓库 1.1从现有的目录中初始化仓库 进入项目目录,git init,会创建一个名为.git的子目录 1.2克隆现有的仓库 git clone [url],会将远程Git仓库中的每一个文 ...

  8. codeforces 738

    D: 题意:一行1*n的格子放船只,船数为a,船的长度为b,每格为0或1,1表示该格并不是船只的一部分,找出最少的格子数使得射击这些格子至少能打中一艘船. 思路:船的长度为b,即每段连续的长度为b的0 ...

  9. OwinStartup not firing

    https://stackoverflow.com/questions/20203982/owinstartup-not-firing 缺少依赖 Make sure you have installe ...

  10. 多线程-栅栏CyclicBarrier

    上一篇总结了闭锁CountDownLatch,这一篇总结一下栅栏CyclicBarrier.它们两者之间的区别主要是,闭锁是等待一个事件发生,比如上一篇的田径比赛,运动员等待裁判哨声一响就可以开始跑, ...