一、基础概念
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上。