<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <canvas id="ourCanvas" width="1100" height="1100"  style="border:3px dashed #0094ff"></canvas>
<script>
    var canvas = document.getElementById("ourCanvas");
    var ctx = canvas.getContext("2d");
    var image = new Image();
    image.src = "images/gho.jpg";
    image.onload = function () {
        //保持原大小绘制图片
        ctx.drawImage(image, 30, 30);
        //绘制图片时进行缩放
        ctx.drawImage(image, 50, 320, 300, 180);
        //从源位图中挖取一块
        ctx.drawImage(image, 30, 50, 100, 100, 100, 600, 150, 150);
    }

</script>
</body>
</html>

drawImage的更多相关文章

  1. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  2. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  3. Java 多张图片合成一张 drawImage

      package com.yunfengtech.solution.business; import java.awt.Color; import java.awt.Graphics; import ...

  4. html5 绘制图片 drawImage

    要在绘图上下文中绘制图片,可以使用 drawImage 方法.该方法有三种不同的参数: drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) d ...

  5. 微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

    以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx ...

  6. 【CITE】DrawImage方法详解(转)

    Image和Bitmap类概述 GDI+的Image类封装了对BMP.GIF.JPEG.PNG.TIFF.WMF(Windows元文件)和EMF(增强WMF)图像文件的调入.格式转换以及简单处理的功能 ...

  7. canvas drawImage异步特性

    先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. C#下解决DrawImage画出来的Image变大了的问题

    如: private Image image= Resources.image1;//假设image1这张资源图是360×600这么大 private Graphics graphics; graph ...

  9. C# 解决DrawImage绘制图片拉伸产生渐变

    ImageAttributes ImgAtt = new ImageAttributes(); ;                 ImgAtt.SetWrapMode(System.Drawing. ...

  10. -_-#【Canvas】measureText, translate, drawImage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. C++设计模式 之 “单一职责”模式：Decorator、Bridge

    part 1 “单一职责”模式 在软件组件的设计中,如果责任划分的不清晰,使用继承得到的结果往往是随着需求的变化,子类急剧膨胀,同时充斥着重复代码,这时候的关键是划清责任. 典型模式 Decorato ...

  2. 20145109竺文君、20145106石晟荣 java实验三

    重构的概念:重构(Refactoring)就是通过调整程序代码改善软件的质量.性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性. 首先由zwj在<git.oschina.net& ...

  3. Python3基础 list 推导式 生成与已知列表等长度+元素为0的列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. hdu 3874（树状数组）题解

    Problem Description Mery has a beautiful necklace. The necklace is made up of N magic balls. Each ba ...

  5. 【附9】elasticsearch-curator + Linux定时任务

    官网教程入口:https://www.elastic.co/guide/en/elasticsearch/client/curator/current/index.html 一.下载安装 下载:sud ...

  6. java web项目配置https访问

      转载: tomcat6配置:  1.单向认证,就是传输的数据加密过了,但是不会校验客户端的来源  2.双向认证,如果客户端浏览器没有导入客户端证书,是访问不了web系统的,找不到地址  如果只是加 ...

  7. Future Works on P4

    Future Works on P4 P4 and NV: MPvisor, Hyper4, HyperV, Flex4 P4 and NFV P4 and Network Cache P4 and ...

  8. Ubuntu上 配置Eclipse：安装CDT

    在最新的 Ubuntu Kylin 16.04 中安装了eclipse,在纠结了很久的网络问题之后,开始了eclipse的配置以便在上面运行ns3. 在官方网站上安装完 eclipse LUNA 之后 ...

  9. LA 3027 合作网络

    https://vjudge.net/problem/UVALive-3027 题意: 有n个结点,初始时每个结点的父节点都不存在.你的任务是执行一次I操作和E操作,格式如下: I u v:把结点u的 ...

  10. XML序列化、反序列化

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Run ...