语法

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

参数

参数
string image
所要绘制的图片资源

number sx
需要绘制到画布中的，image的矩形（裁剪）选择框的左上角 x 坐标

number sy
需要绘制到画布中的，imagee的矩形（裁剪）选择框的左上角 y 坐标

number sWidth
需要绘制到画布中的，image的矩形（裁剪）选择框的宽度

number sHeight
需要绘制到画布中的，image的矩形（裁剪）选择框的高度

number dx
image的左上角在目标 canvas 上 x 轴的位置

number dy
image的左上角在目标 canvas 上 y 轴的位置

number dWidth
在目标画布上绘制image的宽度，允许对绘制的image进行缩放

number dHeight
在目标画布上绘制image的高度，允许对绘制的image进行缩放

html

<canvas id="canvas" style="width:253px;height:317px" ></canvas>

js

<script>
	// 得到标签
	var canvas = document.getElementById("canvas")
    
    // 上下文
    var ctx = canvas.getContext("2d")
    
    // 创建一个图片对象
    var image = new Image()
    
    // 设置src，一旦设置src属性了，那么上行请求将发出
    image.src = 'images/0.jpg'
    
    //图片必须写onload事件,才能drawImage
    image.onload = function () {
    	ctx.drawImage(image, 200, 200)
    }
    
</script>