HTML5 Canvas 背景和颜色的实时预览

Question

如何使用 HTML5 canvas 的实时预览更改背景和文本颜色？

我在 [JSFiddle][1] 上给出的代码仅在调色板关闭后才更改背景和文本颜色。我还想要 canvas 上的文本的可变字体系列和字体大小。我在任何地方都找不到解决方案。

如果代码不能运行，请通过创建html文件来解决问题。

请查看此[图片][2] 了解更多信息。

如有任何建议和帮助，我们将不胜感激。

[1]: https://jsfiddle.net/p0z1vau3/
[2]: https://i.stack.imgur.com/ZpETT.png
[3]: Source: https://codepen.io/stefan0uh/pen/QzJVxa

Answer 1

在您的代码中将 eventListener 更改为：

color.addEventListener("input", render);
bgcolor.addEventListener("input", render);

您可以在此处阅读有关颜色选择器的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Answer 2

如果您需要如何编写更改字体大小和字体系列的代码，请使用以下代码。它还包括对这两个问题的回答。用这个替换你的 javascript 代码。

    const color = document.getElementById("color");
    const canvas = document.getElementById("canvas");
  const style = document.getElementById("font-family");
  const size = document.getElementById("font-size");
    const ctx = canvas.getContext("2d");

    // onload
    window.onload = () => {
    render();
};

    // Eventlistner
    color.addEventListener("input", render);
    bgcolor.addEventListener("input", render);
  style.addEventListener("change", render);
  size.addEventListener("change", render);

    // text positions
    function render() {
    drawBackground();
    drawText("top", canvas.height - 48,size.value,style.value);
    drawText("bottom", canvas.height - 18);
 
}
    // Need live preview for background color
    function drawBackground() {
    ctx.fillStyle = bgcolor.value;
    ctx.fillRect(0, canvas.height - 80, canvas.width + 10, 150);
    ctx.restore();
}
    
    function drawText(text, position, fontSize, fontStyle) {
    ctx.fillStyle = "#ffffff";
    ctx.font = fontSize+"px "+ fontStyle; // Need variable font-family & size

    // Need live preview for color
    var top = [{ 
    text: `      Text`, font: `lighter ${ctx.font}`, fillStyle: color.value}];

    var bottom = [{
    text: `......Text`,
    font: `lighter ${ctx.font}`,
    fillStyle: color.value }];

    fillMixedText(ctx, text === "top" ? top : bottom, 20, position);//text positioning
}
    // fillStyle
    function fillMixedText(ctx, args, x, y) {
    let defaultFillStyle = ctx.fillStyle;
    let defaultFont = ctx.font;

    args.forEach(({ text, fillStyle, font }) => {
    ctx.fillStyle = fillStyle || defaultFillStyle;
    ctx.font = font || defaultFont;

    ctx.fillText(text, x, y);
    x += ctx.measureText(text).width;
    });
    ctx.restore();
}

HTML5 Canvas 背景和颜色的实时预览

Live preview for HTML5 Canvas background and color

javascript

canvas

colors

font-size

font-family