鍍金池/ 問答/HTML5  HTML/ canvas復(fù)制原先路徑到另一個(gè)canvas出錯(cuò)

canvas復(fù)制原先路徑到另一個(gè)canvas出錯(cuò)

問題描述

將第一個(gè)畫板的內(nèi)容通過記錄軌跡重新繪制到圖二第一個(gè)畫板上,出現(xiàn)有問題

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

clipboard.png

clipboard.png

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)
記錄軌跡方法:
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
        },
        //畫筆移動(dòng)
        drawPencilMove: function (e) {
            var len = selArr.length;
            
            if (len == 1) {
                saveInfo(getArr(), downX, downY, e.pageX, e.pageY, line);
            }
            //存儲(chǔ)單個(gè)全屏的信息
            // _self.saveCtx(getCtx(), "round", "round", colorPen, colorPen, _self.settings.lineWidth, ex, ey);
            //單個(gè)全屏?xí)r消隱筆的處理
            if (missPen) {
                getCtx().lineWidth = 20
            }
            getCtx().lineTo(e.pageX, e.pageY);
            getCtx().stroke();
        },

重新設(shè)置軌跡方法:
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("保存的數(shù)據(jù)信息")
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();
}

}

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

想達(dá)到圖1的“4”原樣的重新繪制到圖2中的第一個(gè)畫板上(不是繪制圖片的方式)。求大神指教,謝謝

回答
編輯回答
澐染

知道了,剛弄canvas,軌跡當(dāng)前點(diǎn)的sx、sy應(yīng)該是上一個(gè)點(diǎn)的ex、ey,處理之后就好了。

2017年9月16日 09:16