如何在html5中的canvas下实现ps中的叠加效果

 我来答
博飞港澳台联考
高粉答主

推荐于2017-12-16 · 说的都是干货,快来关注
知道大有可为答主
回答量:1.9万
采纳率:93%
帮助的人:9818万
展开全部
指定两个canvas的postion:absolution,然后设置者两个canvas的left与top属性,需要注意的是建议把小的canvas放到上面,方法是设置两个canvas的z-index为不同的值,值大的在上面。
绘图的过程可以参考一下代码:
var mycanvas=document.getElementByIdx_x_x_x("mycanvas");
var context = mycanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){

// draw cropped image
var sourceX = 350;
var sourceY = 50;
var sourceWidth = 350;
var sourceHeight = 350;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = mycanvas.width / 2 - destWidth / 2;
var destY = mycanvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式