Question

我想使用HTML Canvas创建某种meme生成器，它有2个文本从2个文本字段插入。这是我的代码：

object

现在问题在于这一行：

<body>
    <canvas id="canvas" style="background-color: #ffb515;">
        Sorry, canvas not supported
    </canvas>

    <img id="canvasimg" src="kindle.jpg" style="display:none;"/>

    <input type='text' value='enter some text' id='canvastext-top'/>
    <input type='text' value='enter some text' id='canvastext-bottom'/>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        var canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');

        var deviceWidth = window.innerWidth;;
        canvasWidth = Math.min(500, deviceWidth-20);
        canvasHeight = Math.min(500, deviceWidth-20);

        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        var img = document.getElementById('canvasimg');

        img.onload = function() {
            x = canvas.width/2 - img.width/2;
            y = canvas.height/2 - img.height/2;
            //ctx.drawImage(img, x, y);
        }

        $("#canvastext-top").keyup(function(){              
            ctx.lineWidth = 8;
            ctx.font = '20pt Verdana';
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'white';
            ctx.textAlign = 'center';
            ctx.lineJoin = 'round';

            var text = document.getElementById('canvastext-top').value;
            text = text.toUpperCase();
            x = canvas.width/2;
            y = canvas.height - canvas.height/1.2;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeText(text, x, y);
            ctx.fillText(text, x, y);
        });


        $("#canvastext-bottom").keyup(function(){               
            ctx.lineWidth = 8;
            ctx.font = '20pt Verdana';
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'white';
            ctx.textAlign = 'center';
            ctx.lineJoin = 'round';

            var text = document.getElementById('canvastext-bottom').value;
            text = text.toUpperCase();
            x = canvas.width/2;
            y = canvas.height - canvas.height/4.5;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeText(text, x, y);
            ctx.fillText(text, x, y);
        });
    </script>
</body>

如果我没有刷新画布，文本将如下所示：

ugly text without no refresh

但是，如果我正在使用刷新画布方法，一旦我在第二个文本字段上键入，第一个文本将被刷新并消失。

如何仍然使用此刷新，但在编辑第二个文本时保留画布上的第一个文本。反之亦然。

谢谢。

PS：这是小提琴http://jsfiddle.net/robtn532/

Answer 1

我认为你需要一个函数来绘制在keyup上调用的所有内容。

var drawText = function() {
   ctx.lineWidth = 8;
   ctx.font = '20pt Verdana';
   ctx.strokeStyle = 'black';
   ctx.fillStyle = 'white';
   ctx.textAlign = 'center';
   ctx.lineJoin = 'round';

   ctx.clearRect(0, 0, canvas.width, canvas.height);

   var text = document.getElementById('canvastext-top').value;
   text = text.toUpperCase();
   x = canvas.width/2;
   y = canvas.height - canvas.height/1.2;            
   ctx.strokeText(text, x, y);
   ctx.fillText(text, x, y);

   var text = document.getElementById('canvastext-bottom').value;
   text = text.toUpperCase();
   x = canvas.width/2;
   y = canvas.height - canvas.height/4.5;
   ctx.strokeText(text, x, y);
   ctx.fillText(text, x, y);
}

$("#canvastext-top").keyup(function(){              
   drawText();            
});


$("#canvastext-bottom").keyup(function(){               
   drawText();            
});

Answer 2

在这里小提琴：http://jsfiddle.net/af5jf0ob/

基本上我将所有绘图逻辑移动到一个被重复调用的函数中。每次调用该函数时，它都会从文本框中读取值，并在一次传递中将它们渲染到屏幕上。这与基本游戏循环相同。代码可以稍微整理一下，但这应该可以帮到你。

var text1Y = y = canvas.height - canvas.height/1.2;
var text2Y = y = canvas.height - canvas.height/4.5;
function runLoop(){
    ctx.lineWidth  = 8;
    ctx.font = '20pt Verdana';
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.lineJoin = 'round';

    var text1 = document.getElementById('canvastext-top').value;
    text1 = text1.toUpperCase();


    var text2 = document.getElementById('canvastext-bottom').value;
    text2 = text2.toUpperCase();

    x = canvas.width/2;
    y = canvas.height - canvas.height/4.5;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeText(text1, x, text1Y);
    ctx.fillText(text1, x, text1Y);

    ctx.strokeText(text2, x, text2Y);
    ctx.fillText(text2, x, text2Y);
     window.setTimeout(runLoop, 14);
};
runLoop();

HTML Canvas刷新某些部分，而不是全部

2 个答案: