您的位置:

canvas drawImage详解

一、基础概念

canvas drawImage方法是HTML 5标准中常用的Canvas API之一。它用于将图像文件(包括位图和矢量图)和其他Canvas对象绘制到一个Canvas上。该方法既可以绘制完整的图像,也可以只绘制图像的一部分。使用该方法,可以实现图像的缩放、裁剪、旋转等效果。

二、函数语法

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数解析:

  • image: 绘制到Canvas上的图像文件或Canvas对象。
  • sx: 绘制图像时开始裁剪的X坐标位置。
  • sy: 绘制图像时开始裁剪的Y坐标位置。
  • sWidth: 绘制图像时裁剪的宽度。
  • sHeight: 绘制图像时裁剪的高度。
  • dx: 绘制图像时开始绘制的X坐标位置。
  • dy: 绘制图像时开始绘制的Y坐标位置。
  • dWidth: 绘制出图像时的宽度。(可选)
  • dHeight: 绘制出图像时的高度。(可选)

三、图像文件的加载

在使用drawImage方法在Canvas上绘制图片之前,必须先加载图片文件。如下代码所示:

var img = new Image();
img.src = "路径/文件名.xxx";
img.onload = function(){
  //canvas drawImage方法绘制图片
}

在路径/文件名.xxx中,路径表示图片文件所在的路径,文件名是指图片文件的名称(包括后缀),xxx则表示图片文件的类型(如jpg、png等)。

四、简单示例

下面的示例演示了如何将图片文件绘制到Canvas上。示例中,我们先加载一个被绘制的图像文件(即panda.jpg),然后绘制该图像文件到Canvas上。

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0);
  };
  img.src="panda.jpg";
</script>

运行上述代码,即可在Canvas上绘制出一张名为panda.jpg的图片。

五、绘制部分图片

有时,我们并不需要绘制完整的图片,而是只需要绘制图片的一部分。如下代码所示:

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 100, 100);
  };
  img.src="panda.jpg";
</script>

在上述代码中,我们绘制了panda.jpg图像的左上角的50x50像素范围内的图片到Canvas上,然后将该部分图片放大到100x100像素的范围内。结果是,我们在Canvas上只看到了panda.jpg图像的左上角部分,并且这部分图像被放大了两倍。

六、缩放图片

我们可以通过修改Canvas上绘制图像的宽度和高度,来缩放图像。如下代码所示:

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.drawImage(img, 0, 0, img.width/2, img.height/2);
  };
  img.src="panda.jpg";
</script>

在上述代码中,我们将panda.jpg图像的宽度和高度都缩小了一半,使用的方法是将原始宽度和高度除以2。

七、旋转图片

我们可以通过rotate方法旋转Canvas上绘制的图像。如下代码所示:

<canvas id="myCanvas"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    ctx.rotate(20*Math.PI/180);
    ctx.drawImage(img, 0, 0, 100, 100);
  };
  img.src="panda.jpg";
</script>

在上述代码中,我们将绘制的图像旋转了20度,然后再将该图像绘制到了Canvas上。

八、实现图像填充

我们可以使用drawImage方法实现Canvas中的图像填充效果。如下代码所示:

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=new Image();
  img.onload=function(){
    var pat=ctx.createPattern(img,"repeat");
    ctx.fillStyle=pat;
    ctx.fillRect(0,0,300,150);
  };
  img.src="panda.jpg";
</script>

在上述代码中,我们使用drawImage方法创建一个图像填充效果。具体地,我们首先创建一个Canvas的2D上下文,然后使用createPattern方法创建了一个由panda.jpg图像组成的重复图案,然后将这个图案填充到Canvas上。

canvas drawImage详解

2023-05-20
微信小程序canvas完全攻略

2023-05-23
Node.js Canvas全面解析

2023-05-19
js的canvas应用,canvas web

本文目录一览: 1、JS之使用Canvas绘图 2、《JS原理、方法与实践》- canvas作图(六)- 坐标操作 3、Canvas 使用指南 4、JS中canvas画布绘制中如何实现缩放,位移,旋转

2023-12-08
canvasjs图片(canvas绘制一张图片)

本文目录一览: 1、用HTML5中canvas加js代码把下面这张图片绘制出釆 2、为什么我用js创建的image在canvas里显示不出来? 3、HTML5、JS的canvas绘制图片的问题。。 4

2023-12-08
Canvas画布详解

2023-05-18
js和canvas实现数字滚动,canvas 滚动条

本文目录一览: 1、Unity3d如何实现滚动文本框 2、如何实现canvas的图片轮播 3、怎样canvas画布上添加滚动条,显示更多数据 4、HTML5 在CANVAS标签里面增加滚动条 Unit

2023-12-08
java方法整理笔记(java总结)

2022-11-08
详解jsimage

2023-05-17
Canvas绘制矩形

2023-05-21
canvas内部滚动条,canvas内容滚动

2022-11-29
canvas图片在路线上滚动,canvas滑动事件

2022-11-25
包含js调色盘canvas的词条

本文目录一览: 1、JS中canvas画布绘制中如何实现缩放,位移,旋转 2、js+html5实现canvas绘制椭圆形图案的方法 3、JS之使用Canvas绘图 4、如何用js新建一个canvas?

2023-12-08
js结合canvas,js结合echart绘图

本文目录一览: 1、JS之使用Canvas绘图 2、如何用js新建一个canvas? 3、js+html5实现canvas绘制椭圆形图案的方法 JS之使用Canvas绘图 canvas 元素负责在页面

2023-12-08
关于python中的canvas的信息

2022-11-13
印象笔记记录java学习(Java成长笔记)

2022-11-12
java客户端学习笔记(java开发笔记)

2022-11-14
发篇java复习笔记(java课程笔记)

2022-11-09
js中canvas是什么,Canvas是什么

2022-11-23
canvas结合js画字(canvas写字)

本文目录一览: 1、js+html5实现canvas绘制镂空字体文本的方法 2、JS之使用Canvas绘图 3、如何在canvas 画图加文字 4、canvas绘制 js+html5实现canvas绘

2023-12-08