javascript - 画布：在“setInterval”中添加 canvas.width 不起作用

Question

这是我的代码：

var text = "3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609433057270365759591953092186117381932611793105118548074462379962749567351885752724891227938183011949129833673362440656643086021394946395224737190702179860943702770539217176293176752384674818467669405132000568127145263560827785771342757789609173637178721468440901224953430146549585371050792279689258923542019956112129021960864034418159813629774771309960518707211349999998372978049951059731732816096318595024459455346908302642522308253344685035261931188171010003137838752886587533208381420617177669147303598253490428755468731159562863882353787593751957781857780532171226806613001927876611195909216420198938095257201065485863278865936153381827968230301952035301852968995773622599413891249721775283479131515574857242454150695950829533116861727855889075098381754637464939319255060400927701671139009848824012858361603563707660104710181942955596198946767837449448255379774726847104047534646208046684259069491293313677028989152104752162056966024058038150193511253382430035587640247496473263914199272604269922796782354781636009341721641219924586315030286182974555706749838505494588586926995690927210797509302955321165344987202755960236480665499119881834797753566369807426542527862551818417574672890977772793800081647060016145249192173217214772350141441973568548161361157352552133475741849468438523323907394143334547762416862518983569485562099219222184272550254256887671790494601653466804988627232791786085784383827967976681454100953883786360950680064225125205117392984896084128488626945604241965285022210661186306744278622039194945047123713786960956364371917287467764657573962413890865832645995813390478027590099465764078951269468398352595709825822620522489407726719478268482601476990902640136394437455305068203496252451749399651431429809190659250937221696461515709858387410597885959772975498930161753928468138268683868942774155991855925245953959431049972524680845987273644695848653836736222626099124608051243884390451244136549762780797715691435997700129616089441694868555848406353422072225828488648158456028506016842739452267467678895252138522549954666727823986456596116354886230577456498035593634568174324112515076069479451096596094025228879710893145669136867228748940560101503308617928680920874760917824938589009714909675985261365549781893129784821682998948722658804857564014270477555132379641451523746234364542858444795265867821051141354735739523113427166102135969536231442952484937187110145765403590279934403742007310578539062198387447808478489683321445713868751943506430218453191048481005370614680674919278191197939952061419663428754440643745123718192179998391015919561814675142691239748940907186494231961567945208095146550225231603881930142093762137855956638937787083039069792077346722182562599661501421503068038447734549202605414665925201497442";
var pi = [];
pi = text.split('');
$('document').ready(function () {
    canvas = document.createElement("canvas");
    canvas.width = 15;
    canvas.height = 100;
    canvas.style.position = 'absolute';
    canvas.style.border = '1px solid';
    canvas.border = 'solid 1px';
    canvas.style.top = '0px';
    canvas.style.left = '0px';
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");
    draw();
});

function draw() {
    var i = 0;
    setInterval(function () {
        if(i < 50) {
            ctx.beginPath();
            ctx.moveTo(15 * i, 100 - pi[i] * 10);
            ctx.lineTo(15 * (i + 1), 100 - pi[i + 1] * 10);
            ctx.stroke();
            i++;
            canvas.width += 15;
            //console.log(i);
        };
    }, 100)
}

如果我注释掉它完全有效

canvas.width += 15;

如果我把它放在那里，canvas.width确实会增加，但线条不会出现。

任何人都可以帮忙吗？非常感谢。

通过将宽度放在行前解决了问题。

但这是我的进一步问题：如何连续画线？现在旧的在新的之后消失了。

Answer 1

问题是更改画布宽度会重置画布状态，包括当前在其上绘制的内容。如果在创建线条之前增加宽度，这两个事件都会按预期发生。

为了在画布状态重置后保留之前的路径，您可以创建一个临时画布来保存内容，然后在调整宽度后移回。

function draw() {
    var i=0;
    setInterval(function() {
        if (i<50) {
            // Create a temporary canvas
            var temp_canvas = document.createElement("canvas");
            var temp_ctx = temp_canvas.getContext("2d");

            // Update the temporary canvas width (will reset temporary canvas state) and draw original canvas back in
            temp_canvas.width = canvas.width + 15; 
            temp_canvas.height = canvas.height;
            temp_ctx.drawImage(canvas, 0, 0);

            // Draw temporary canvas back into original canvas
            canvas.width = temp_canvas.width; 
            canvas.height = temp_canvas.height;
            ctx.drawImage(temp_canvas, 0, 0);

            // Draw in new path
            ctx.beginPath();
            ctx.moveTo(15*i, 100-pi[i]*10);
            ctx.lineTo(15*(i+1), 100-pi[i+1]*10);
            ctx.closePath();
            ctx.stroke();

            i++;

            //console.log(i);
        }
    }, 100);
}

演示