大白话canvas中drawImage()方法

 API

drawImage(img, x, y)
drawImage(img, x, y, width, height)
drawImage(img, sx, sy, sw, sh,x, y, width, height)

参数

• img：操作图形

• x、y：用于定位（左上角），就是从哪个点开始绘制。x 是距原点的水平距离  y是距原点的垂直距离

• width、height：画多大，宽高

• sx、sy：用于定位（左上角），在原图哪个点开始剪切

• sw、sh：剪多大，宽高

原点：当前起始点，新建画布后起始是（0,0）偏移100,200后，原点就是(100,200)

绘制：需要四个参数，在哪个点开始绘制(x,y)，绘制多大(width,height)
剪切：需要四个参数，在哪个点开始剪切(sx,sy)，绘制多大(sw,sh)

drawImage(img, 10, 20)
在原点水平偏移10，垂直偏移20，开始绘制图形

drawImage(img, 10, 20, 300, 300)
在原点水平偏移10，垂直偏移20，开始绘制一个300*300的图形

drawImage(img, 1, 2, 150, 150,10, 20, 300, 300)
这里分两步会好理解一点，第一步确定外框大小，第二步确定要显示内容图形的大小
（先确定一个外框）原点水平偏移10，垂直偏移20，开始绘制一个300*300的区域
（框内显示内容）原图形水平偏移1，垂直偏移2的位置开始剪切一个150*150的图形