by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2017/11/canvas-draw-to-canvas/

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, canvasHeight, canvas);
    return canvas;
}

这样就能将其绘制到主canvas上

var _canvas = createCanvas(config.GameWidth, config.GameHeight);
var childSp = new Laya.Sprite();
var _texture = new Laya.Texture(_canvas);
Laya.stage.addChild(childSp);

Cocos

cocos引擎支持的比较好,只需要简单的方法搞定

var sp = new cc.Sprite(sharedCanvas)
sp.setAnchorPoint(0, 0)
sp.x = 0
sp.y = 0

this.addChild(sp)

canvas是Sprite的入参,即可绘制在主canvas上。

两个canvas同步绘制

无论两种引擎的方法怎样,最终的实现肯定是drawImage,这是一个绘制静态的图片的方法,我们绘制的内容永远只有子canvas的的一帧。那么有什么方法可以同步两个canvas的绘制呢?

方法是,控制两个canvas的引擎都同时绘制。A在绘制的时候,B也在绘制,只要A同步绘制B的结果就好:

在laya中:

Laya.timer.frameLoop(1, this, function() {
    childSp.texture = _texture;
});

写一个定时器,不断的重新设置新的纹理就好。这样B的绘制结果就是即时同步绘制在A上面。

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2017/11/canvas-draw-to-canvas/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号