drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。

这个方法有三张传参模式,3个参数,5个参数,9个参数

3个参数

被画的图片不进行裁切和压缩,原大小绘制到canvas上。

context.drawImage(img,x,y);

x, y 表示绘制到canvas上的起始位置。

<style>
canvas{
border:1px solid #d3d3d3;
background:#ffffff;
}
</style>
<img id="image" src="https://img.alicdn.com/tfs/TB1vIhSQXXXXXXFaXXXXXXXXXXX-1376-1366.png_200x200.jpg"/>
<canvas id="canvas" width="300" height="300" style=""></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("image"); // 在canvas 10x10 的坐标绘制原大小的图片
ctx.drawImage(img, 10, 10);
</script>

5个参数

在画布上定位图像,并规定图像的宽度和高度:

context.drawImage(img,x,y,width,height);

x, y 表示绘制到canvas上的起始位置。width, height 表示画到canvas上图片的大小

<style>
img{vertical-align: top;}
canvas{
border:1px solid #d3d3d3;
background:#ffffff;
}
</style>
<img id="image" src="https://img.alicdn.com/tfs/TB1vIhSQXXXXXXFaXXXXXXXXXXX-1376-1366.png_200x200.jpg"/>
<canvas id="canvas" width="300" height="300" style=""></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("image"); // 将原图在canvas 坐标为 10x10 的位置开始绘制,并且将图片绘制为 100x100 的大小
ctx.drawImage(img, 10, 10, 100, 100);
</script>

9个参数

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

sx,sy 裁切的开始位置(基于原图)

swidth,sheight 裁切的宽高(基于原图)

x, y 表示绘制到canvas上的起始位置。

width, height 表示画到canvas上图片的大小。

<style>
img{vertical-align: top;}
canvas{
border:1px solid #d3d3d3;
background:#ffffff;
}
</style>
<img id="image" src="https://img.alicdn.com/tfs/TB1vIhSQXXXXXXFaXXXXXXXXXXX-1376-1366.png_200x200.jpg"/>
<canvas id="canvas" width="300" height="300" style=""></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("image"); // 从原图 100x100 坐标开始截取宽度为 100x100 图像
// 并在canvas 10x10 的坐标开始绘制为 200x200 尺寸的图片
ctx.drawImage(img, 100, 100, 100, 100, 10, 10, 200, 200);
</script>

Canvas drawImage的更多相关文章

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

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

  2. canvas drawImage异步特性

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

  3. Canvas drawImage API

    drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  5. canvas.drawImage()方法详解

    首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...

  6. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  7. canvas drawImage 不显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. canvas drawImage图片不显示问题

    初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...

  9. canvas drawimage绘制图像出错(默认canvas300*150)解决办法

    今天在开发中,再一次踩了以前踩过的坑,写完程序在这里写一下,分享给大家也避免再次遇坑. //默认的canvas <canvas id ="canvas"></ca ...

随机推荐

  1. java中什么是bridge method(桥接方法)

    java中什么是bridge method(桥接方法) https://blog.csdn.net/z69183787/article/details/81115524

  2. [转]maven2中snapshot快照库和release发布库的区别和作用

    Post by 铁木箱子 in 技术杂谈 on 2010-08-03 17:17 [转载声明] 转载时必须标注:本文来源于铁木箱子的博客http://www.mzone.cc[原文地址] 原文永久地址 ...

  3. TSharding源码阅读-MapperShardingInitializer

    /** * 增强Mapper处理总入口:Mapper被mybatis初始化后,在这里做进一步的处理和增强 * * @author qigong on 5/1/15 */ public class Ma ...

  4. PHP-Manual的学习----【语言参考】----【类型】-----【Boolean类型】

    2017年7月20日15:41:26Boolean 布尔类型 1.这是最简单的类型.boolean 表达了真值,可以为 TRUE 或 FALSE. 其实就是真假的问题.2.语法 要指定一个布尔值,使用 ...

  5. Cocos2d-x中使用第三方so库

    项目中假设使用到第三方的SDK,大多数是以.so动态共享库的文件打包给我们使用.怎样使用他们,见以下分析. 1.获得库文件 假如我们得到的库文件是libxxx.so(注:关于.so文件的命名方式,可百 ...

  6. Myeclipse 文件注释和解注释

    我用的是myeclipse10.6, 在xml中 注释可以用: ctrl+shift+/ (段落注释) ctrl+shift+c (行注释) 解除注释可以用: ctrl+shift+\ 在proper ...

  7. 【BZOJ3143】[Hnoi2013]游走 期望DP+高斯消元

    [BZOJ3143][Hnoi2013]游走 Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 ...

  8. linux c编程:线程创建

    前面章节中介绍了进程.从这一章开始介绍线程.进程和线程的差别是什么呢: 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位.  线程是进程的一个实 ...

  9. hibernate 多对多 懒加载问题

    报错:org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role: net. ...

  10. 阿里云centos7搭建php+nginx环境

    阿里云Centos搭建lnmp(php7.1+nginx+mysql5.7) https://jingyan.baidu.com/article/215817f7a10bfb1eda14238b.ht ...