Question

使用了哪些元素：背景图像+图像（形状）+画布中的文字

问题：没有在画布上的背景图像上方显示文字。

我的期望：在图像上方显示带有背景图像的文字。

我拥有的内容：如果删除了图片makeShape()功能，则会显示文字。注意：图像功能具有背景颜色。

这是一个HTML表单代码：

<!doctype html>
<html lang="en">
    <head>
        <title>Canvas text above picture</title>    
        <meta charset="utf-8">
        <style>
            canvas {
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
<form>
<p>
<label for="backgroundColor">Text font:</label>
<select id="backgroundColor">
<option value="white" selected="selected">White</option>
<option value="black">Black</option>
</select>
</p>
<p>
<label for="txt">Text font:</label>
<textarea id="txt" cols="40" rows="3"></textarea>
</p>

<p>
<input type="button" id="previewButton" value="Preview">
</p>
</form>
        <canvas id="myCanvas" width="600" height="500"></canvas>
        <script src="canvasshirt.js"></script>

    </body>
</html>

canvasshirt.js代码：

window.onload = function() {
    var button = document.getElementById("previewButton");
    button.onclick = previewHandler;
}

function previewHandler() {

    var ca = document.getElementById("myCanvas");
    var co = ca.getContext("2d");

    var bgcolor = document.getElementById("backgroundColor");
    var index = bgcolor.selectedIndex;
    var fgColor = bgcolor[index].value;

    var text = document.getElementById("txt").value;

    drawText(co, text); // ! - this should show text above of drawBckg() function

    drawBckg(ca, co, 600, 500, fgColor); // this draw a background of picture below of text
}


function drawBckg(ca, co, w, h, color)
{
    makeShape(co);

    co.fillStyle = color;
    co.fillRect(0, 0, w, h);
}

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {
        co.drawImage(shapeimg, 170, 10, 233, 350);
    }
}

function drawText(co, text)
{
    co.font = " 13px Arial";
    //co.font = "bold 1em sans-serif";
    co.textAlign = "left";
    co.fillText(text, 20, 40);
}

FIXATION TRY ......

何时更改源代码的功能排序，结果如下：

drawBckg(ca, co, 600, 500, fgColor);
drawText(co, text);

示例图片（文字在图片下方）：

Blue text is below of <code>makeShape()</code> picture with turned off background

Answer 1

drawBckg(ca, co, 600, 500, bgcolor, function(){
    drawText(co, text, fgColor);
});

...

function drawBckg(ca, co, w, h, color, callback)
{
    makeShape(co, callback);

    co.fillStyle = color;
    co.fillRect(0, 0, w, h);
    callback();  // draw the text here as a fallback if the image doesn't load
}

function makeShape(co, callback)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {
        co.drawImage(shapeimg, 170, 10, 233, 350);
        callback();  // draw the text after drawing the image.
    }
}

Answer 2

找到解决方案。

首先绘制一个对象时，它必须恢复到新状态，否则它将在同一图像上形成图像。这是函数co.restore()：

function drawBckg(ca, co, w, h, color)
{
    co.restore();

    makeShape(co);
}

但是，我的失败是放入内部加载功能：

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    shapeimg.onload = function() {  // <-- remove
    co.drawImage(shapeimg, 170, 10, 233, 350);
    }   // <-- remove
}

这将加载，显示在图片下方，因为它首先加载。正常删除onload到加载的drawImage：

function makeShape(co)
{
    var shapeimg = new Image();

    shapeimg.src = "shape2.png";

    co.drawImage(shapeimg, 170, 10, 233, 350); // <-- this
}

现在有效！

HTML5文本在图像上方，背景画布未显示

2 个答案: