canvas 在其他画好的上面继续画_游戏引擎是怎样将一个canvas绘制到另外一个canvas上...

本文介绍了在canvas元素上叠加绘制另一个canvas的方法,包括使用原生的ctx.drawImage接口以及在Laya和Cocos游戏引擎中的实现。通过将一个canvas转换为HTMLCanvas或者直接利用引擎提供的API,可以实现两个canvas的同步绘制。关键在于理解drawImage方法和在特定引擎环境下处理canvas纹理。
摘要由CSDN通过智能技术生成

canvas 中画另外一个canvas,在原生的接口里面有一种方法

接口

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource),例如:HTMLImageElement,HTMLVideoElement,或者 HTMLCanvasElement。

同样canvas.toDataURL()返回的是base64的图片,把这个绘制到canvas,接口用的还是一样的。

Laya

找了半天文档终于发现一个看起来可行的方法

Texture 是一个纹理处理类。

有一个bitmap 属性,可以是图片或者canvas 。

var _texture = new Laya.Texture(canvas);

但实际发现确实不行的,因为这个canvas不是普通的canvas。而是Laya自定义的一个类Laya.HTMLCanvas。

所以要转变下思路,将原生的canvas转换为HTMLCanvas。

function createCanvas(canvasWidth, canvasHeight) {

var canvas = Laya.HTMLCanvas.create("2D");

var context = new Laya.RenderContext(canvasWidth, canv

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值