drawImage 绘制一个圆

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

img	图像
sx	可选。开始剪切的 x 坐标位置
sy	可选。开始剪切的 y 坐标位置
swidth	可选。被剪切图像的宽度
sheight	可选。被剪切图像的高度
x	在画布上放置图像的 x 坐标位置
y	在画布上放置图像的 y 坐标位置
width	可选。要使用的图像的宽度 (在画布上显示多大)
height	可选。要使用的图像的高度 (在画布上显示多大)

原图


使用 canvas 加载图片

<canvas id="canvas-1" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-1");
var ctx = canvas.getContext('2d');
var img = document.createElement("img");
img.src = "/static/images/svon.png";
img.onload = function(){
	var sx = 0; //不裁剪
	var sy = 0; //不裁剪
	var swidth = img.width;
	var sheight = img.height;
	//居中显示
	var x = (canvas.width - swidth) / 2;   // 使用 canvas 的宽度减去图片宽度, 计算居中位置
	var y = (canvas.height - sheight) / 2; // 使用 canvas 的高度减去图片高度, 计算居中位置
	var width = img.width;
	var height = img.height;
	ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
};
</script>

有没有觉得这些参数太多了?drawImage 做了容错机制, 看下面。


Api 2

drawImage(img,x,y,width,height);
img	图像
x	在画布上放置图像的 x 坐标位置
y	在画布上放置图像的 y 坐标位置
width	可选。要使用的图像的宽度 (在画布上显示多大)
height	可选。要使用的图像的高度 (在画布上显示多大)

使用 canvas 加载图片

<canvas id="canvas-2" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-2");
var ctx = canvas.getContext('2d');
var img = document.createElement("img");
img.src = "/static/images/svon.png";
img.onload = function(){
	var width = img.width;
	var height = img.height;
	//让图片右下角显示
	var x = (canvas.width - width);   
	var y = (canvas.height - height); 
	ctx.drawImage(img,x,y,width,height);
};
</script>

Api 3

drawImage(img,x,y);
img	图像
x	在画布上放置图像的 x 坐标位置
y	在画布上放置图像的 y 坐标位置

使用 canvas 加载图片

<canvas id="canvas-3" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-3");
var ctx = canvas.getContext('2d');
var img = document.createElement("img");
img.src = "/static/images/svon.png";
img.onload = function(){
	var x = 0;
	var y = 0;
	//让图片左下角显示
	ctx.drawImage(img,x,y);
};
</script>