湖南长沙网站建设公司电话/企业培训计划
| 参数 | 描述 |
|---|---|
| img | 用来被绘制的图像、画布或视频。 |
| sx | 可选。img被绘制区域的起始左上x坐标。 |
| sy | 可选。img被绘制区域的起始左上y坐标。 |
| swidth | 可选。img被绘制区域的宽度（如果没有后面的width或height参数，则可以伸展或缩小图像）。 |
| sheight | 可选。img被绘制区域的高度（如果没有后面的width或height参数，则可以伸展或缩小图像）。 |
| x | 画布上放置img的起始x坐标。 |
| y | 画布上放置img的起始y坐标。 |
| width | 可选。画布上放置img提供的宽度（可能会有图片剪裁效果）。 |
| height | 可选。画布上放置img提供的高度（可能会有图片剪裁效果）。 |
写法： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 详解： context.drawImage(canvas对象,移动中心_x,移动中心_y,截取原图片多宽的区域作为显示,截取原图片多高的区域作为显示,x坐标,y坐标,图片宽度（溢出隐藏）,图片高度（溢出隐藏）);
实例：
//海报背景（已存在的图片）
var eleImgCover = document.getElementById('imgCover');
//上传图片（已通过方法获取到 document.getElementById("imgUpload").src = window.URL.createObjectURL(imgFile.files[0]);）
var imgUpload = document.getElementById('imgUpload');
//创建画布
var canvas = document.createElement('canvas');
//高宽设置
var upload_width = 514;
var upload_height = 528;
var cover_width = 692;
var cover_height = 1142;
canvas.width = cover_width;
canvas.height = cover_height;
var context = canvas.getContext('2d');
//上传图像绘制
context.drawImage(imgUpload, 0, 0, upload_width, upload_height, 92,302, upload_width, upload_height);
//底板图绘制
context.drawImage(eleImgCover, 0, 0, cover_width, cover_height, 0,0, cover_width, cover_height);
//给要存放此图片的img标签赋值
$(".down_poster").attr("src",canvas.toDataURL('image/png'));