<!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++的友元类、方法及其益处

    在java中,我们知道除了public和private,protected外,还有默认的包可见性访问级别,虽然如此,很多时候出于早期设计缺陷的原因,我们需要访问一些包或者protected可见性级别的 ...

  2. velocity #parse抽象重用部分组件

    在某些时候,处于重用的目的,我们会选择将可以重用的部分内容剥离在单独的模板文件中,比如对于查询页面的表格部分,因为现在很多的条件可能是通过弹出查询框的方式来实现,而作为普通页面的时候,他们会有更多的功 ...

  3. 20165211 2017-2018-2 《Java程序设计》第6周学习总结

    20165211 2017-2018-2 <Java程序设计>第6周学习总结 教材学习内容总结 本周,我学习了书本上第八.十五两章的内容,以下是我整理的主要知识. 第八章 常用实用类 St ...

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

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

  5. 在ubuntu bionic下对基于qemu的arm64进行linux内核5.0.1版本的编译和运行

    一.环境介绍 OS:ubuntu bionic 64bit 二.准备工作 2.1 安装必要的开发工具 sudo apt-get install git flex bison build-essenti ...

  6. react 为元素添加自定义事件监听器

    https://zhenyong.github.io/react/tips/dom-event-listeners.html class MovieItem extends React.Compone ...

  7. java中的抽象类和抽象方法

    知识点:java中的抽象类和抽象方法 关键字abstract意为抽象的,可以用来修饰类和方法,分别称作抽象类和抽象方法 抽象类一般在多态的场景中使用 一:抽象类(abstract class) 在类的 ...

  8. Sql　最简单的Ｓｑｌｓｅｒｖｅｒ连接

    string name = txtUserName.Text.Trim();//移除用户名前部和后部的空格 string pwd = txtUserPwd.Text.Trim();//移除密码前部和后 ...

  9. Vue开发中的中央事件总线

    在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...

  10. gulp报错插件gulp-notify 配置项

    var notify = require("gulp-notify"); module.exports = function(){ var args = Array.prototy ...