html5画布中的条件答案

【问题标题】：Conditions in html5 canvashtml5画布中的条件
【发布时间】：2015-04-09 03:05:31
【问题描述】：

我正在尝试向我的画布添加条件。 #iconTel 元素是一个复选框。我只想在选中复选框时才在画布上显示一个图标。这是我尝试过的……但不起作用。我在网上搜索了很多都没有成功。

function updateClicked() {

    oCanvas.width = oCanvas.width;
    oCtx.drawImage(img,0,0);

   $('#iconTel').click(function(){
    if (this.checked) {
        oCtx.font = "15px VonnesReg";     // different font
        oCtx.fillStyle = "#ff0000";
        oCtx.textBaseline = "top";           // text baseline at the top
        oCtx.fillText(document.getElementById("iconTel").value, 260, 172, 225);
    }
})

因此，当检查该复选框时，需要出现该元素，如果未选中，则消失了，而无需擦除整个画布。

感谢您的帮助

【问题讨论】：

常见的canvas设计模式是，当canvas内容需要改变时，canvas被彻底清除，所有新需要的内容都被重绘。听起来您正在与这种常见的设计模式作斗争——尤其是考虑到您对 onKey 与您的内容混淆的评论。完全清除画布的替代方法是直接在当前画布的顶部放置第二个画布（使用 CSS 绝对定位）。然后您可以在该顶部画布上绘制/清除您的可选内容。 ;-)
感谢 markE 的评论。我还没有想到，但这将是一个很好的解决方案！非常感谢

标签： javascript jquery html canvas

【解决方案1】：

只需在文本的同一区域中添加clearRect()，在这种情况下，我将使该矩形的宽度与文本的最大宽度相同（如果您愿意，可以更改它)。

if (this.checked) {
    oCtx.font = "15px VonnesReg";     
    oCtx.fillStyle = "#ff0000";
    oCtx.textBaseline = "top";           
    oCtx.fillText(document.getElementById("iconTel").value, 260, 172, 225);
} else {
    // Clear Text
    oCtx.fillStyle = "#00ffff";    
    oCtx.clearRect(260, 172, 225, 15);
}

Fiddle Example

如果您在画布上的矩形区域中有项目，那么您要做的是在更改文本后重新绘制内容。如果您的画布上有静态背景（不随时间变化的背景），那么您只需要在开始时保存该上下文，除了清除画布之外，将其替换为起始上下文。例如：

// Initial Drawing Code 
initImgData=oCtx.getImageData(0,0,canvas.width, canvas.height);

if (this.checked) {
    ...
} else {
    oCtx.putImageData(initImgData,0,0);
}

Here is a fiddle for that

【讨论】：

这很好用！唯一的事情是我使用“onkeyup”事件在画布上的多个文本框中显示我正在尝试的文本。每次在这些文本框中键入一个字母时，与“onkeyup”事件链接的函数都会重绘整个画布......因此它会通过复选框删除新添加的元素。有没有办法让文档验证是否在重绘画布“onkeyup”时选中了复选框，新添加的元素将保留在那里，或者不取决于它是否被选中（对不起我的英语，我正在做我的最好解释清楚）