canvas复制原先路径到另一个canvas出错

Question

canvas复制原先路径到另一个canvas出错

磨剑人

6763345

发布于
2018-07-31

问题描述

将第一个画板的内容通过记录轨迹重新绘制到图二第一个画板上，出现有问题

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
记录轨迹方法：
drawPencilDown: function (e) {

            getCtx().lineJoin = "round";
            getCtx().lineCap = "round";
            getCtx().strokeStyle = _self.settings.strokeStyle;
            getCtx().fillStyle = _self.settings.strokeStyle;
            getCtx().lineWidth = _self.settings.lineWidth;
            //draw single dot in case of a click without a move
            getCtx().beginPath();
            getCtx().arc(e.pageX, e.pageY, _self.settings.lineWidth / 2, 0, Math.PI * 2, true);
            getCtx().closePath();
            getCtx().fill();
            //start the path for a drag
            getCtx().beginPath();
            getCtx().moveTo(e.pageX, e.pageY);
            line = _self.settings.lineWidth;//画笔尺寸
            downX = e.pageX;//落笔处X
            downY = e.pageY;//落笔处Y
        },
        //画笔移动
        drawPencilMove: function (e) {
            var len = selArr.length;
            
            if (len == 1) {
                saveInfo(getArr(), downX, downY, e.pageX, e.pageY, line);
            }
            //存储单个全屏的信息
            // _self.saveCtx(getCtx(), "round", "round", colorPen, colorPen, _self.settings.lineWidth, ex, ey);
            //单个全屏时消隐笔的处理
            if (missPen) {
                getCtx().lineWidth = 20
            }
            getCtx().lineTo(e.pageX, e.pageY);
            getCtx().stroke();
        },

重新设置轨迹方法：
function setNew() {

var canvastest = document.getElementById('canvasTest');
ctxtest = canvastest.getContext('2d');
// ctxtest.clearRect(0, 0, window.screen.width, window.screen.height);
canvastest.style.display = 'block';
canvastest.width = 928;
canvastest.height = 406;
console.log("保存的数据信息")
console.log(dataOld1)
for (var i = 0; i < dataOld1.length; i++) {
    ctxtest.beginPath();
    ctxtest.moveTo(dataOld1[i].sx, dataOld1[i].sy);
    ctxtest.lineTo(dataOld1[i].ex, dataOld1[i].ey);
    ctxtest.closePath();
    ctxtest.lineJoin = 'round';
    ctxtest.lineCap = 'round';
    ctxtest.strokeStyle = dataOld1[i].c;
    ctxtest.lineWidth = dataOld1[i].w;
    ctxtest.stroke();
}

}