canvas drawImage

canvas drawImage使用

描述
元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形

//图像位置
context.drawImage(img,x,y)

//图像宽高
context.drawImage(img,x,y,width,heigth);

//在画布上剪切位置和宽高
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,heigth)

参数值

参数
描述

img
规定要使用的图像、画布或视频。

sx
可选。开始剪切的 x 坐标位置。

sy
可选。开始剪切的 y 坐标位置。

swidth
可选。被剪切图像的宽度。

sheight
可选。被剪切图像的高度。

x
在画布上放置图像的 x 坐标位置。

y
在画布上放置图像的 y 坐标位置。

width
可选。要使用的图像的宽度。（伸展或缩小图像）

height
可选。要使用的图像的高度。（伸展或缩小图像）