设置画布的背景颜色与图象和文本

Question

我想创建一个canvas元素，我想在图像下放置一个图像和一些文本。这件事情很好。现在我想将画布的背景颜色设置为“黄色”，将文本颜色设置为“黑色”。我可以设置文本颜色，但我无法设置canvas元素的背景颜色。这是我的pen

function convertImageToCanvas() {
    var s = '<img src="http://usabilitygeek.com/wp-content/uploads/2012/04/HTML-Guidelines-Usability-SEO-A-Link-Tag.jpg" alt="" id="image-on" />';
    var htmlObject = document.createElement('div');
    htmlObject.innerHTML = s;

    var image = htmlObject.firstChild;
    var c = '<canvas id= "drawing"> </canvas>';
    var canvasObject = document.createElement('div');
    canvasObject.innerHTML = c;

    var canvas = canvasObject.firstChild; /*document.createElement("canvas");*/
    var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.';
    var lineHeight = 25;
    var maxWidth = image.naturalWidth;
    var context = canvas.getContext("2d");
    var lines = getLines(context, text, maxWidth);

    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight + lineHeight + (lines * lineHeight);
    canvas.style.background = "#FFFF00";
    context.font = '16pt Calibri';
    context.fillStyle = '#FFFF00';
    //context.fill();
    //var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);

    var y = image.naturalHeight + lineHeight;
    var x = 0;
    wrapText(context, text, x, y, maxWidth, lineHeight);
    /*context.fillText("Here will be the comment", x, y);*/

    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    image.setAttribute('crossOrigin', 'anonymous');
    console.log("the source of the image will be " + image.src);
    /*var imageUrl = canvas.toDataURL();
    console.log("the image url is as followes"+imageUrl);*/

    return canvas;
}


function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
    //context.strokeText(line, x, y);
}

function getLines(context, text, maxWidth) {
    var words = text.split(' ');
    var line = '';
    var num = 1;

    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            line = words[n] + ' ';
            num += 1;
        } else {
            line = testLine;
        }

    }
    return num;
}

canvas {
    background: #FFFF00;
}

<div id="total-container">
    <div>
        Open dev tools then Click on the "Click Me" button. then check out the console tab and click on the link for the Image. 
    </div>
    <div id="image-container">
        <img src="http://usabilitygeek.com/wp-content/uploads/2012/04/HTML-Guidelines-Usability-SEO-A-Link-Tag.jpg" alt="" id="image-on" />
    </div>
    <div id="comment-container">
        Lorem Ipsum
    </div>
    <button onclick="convertImageToCanvas()">Click Me</button>

Answer 1

您可以像这样设置画布的背景颜色：

canvas{
    background-color: #FFFF00;
}