<!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. HCNP学习笔记之IP地址、子网掩码、网关的关系

      0x00 概述 网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置. 以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 ...

  2. JS获取周、月、季度日期

    效果: 代码: //用于获取日期本周.本月.本季度的js //Author : guanghe //文件引用方法:<script src="${staticPath}/common/j ...

  3. web应用下的安全问题以及tomcat/nginx对应解决方法（持续更新、亲测可解决问题）

    最近一券商那边扫描反馈了下面几个非业务型安全漏洞,要求解决,如下: XSS 自己写个脚本response的时候对特殊字符进行了处理,或者网上搜下一堆(不要忘了回车.换行). HTML form wit ...

  4. C++设计模式（第一周）

    part 1 设计模式简介 课程目标 1.理解松耦合设计思想 2.掌握面向对象设计原则 3.掌握重构技法改善设计 4.掌握GOF 核心设计模式 什么是设计模式? “每一个模式描述了一个在我们周围不断重 ...

  5. CAN/J1850/

    (1)CAN:(差分信号)有信号CANH=3.5V,CANL=1.5V, 没有信号CANH=2.5V,CANL=2.5V 速率:CAN系统又分为高速和低速,高速CAN系统采用硬线是动力型,速度:500 ...

  6. 一种新的技术，C++/CLI

    一.来源 在一个项目中,拿到了一个demo,看起来像是C#,又像是C++,部分截图如下 1.界面[C#的winform] 2.mian入口,是cpp 3.解决方案 二.猜测 一开始以为是C#工程,因为 ...

  7. Makefile使用总结【转】

    1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...

  8. json封装数据，然后通过创造的标签调用

    <ul class="list"> <li></li> <li></li> <li></li> ...

  9. Unity3D学习笔记（一）：Unity3D简介

    Unity3D简介一.什么是Unity.U3D?全面整合的专业引擎 二.这个软件能做什么?1.内容:3D2D游戏,教育,建筑,网页,VRAR,家庭娱乐系统2.媒体:PC平台,主机,移动,VR 1.UE ...

  10. CVS导出&&自定义Attribute的使用

    1.cvs导出:List转为byte[] /// <summary> /// CvsExport帮助类 /// </summary> public static class C ...