在隐藏的html5 canvas元素中绘制不起作用 [英] Draw in hidden html5 canvas element doesnt work

问题描述

我尝试在画布中绘制，而其父项是 display：none 。
有没有办法做到这一点？

下面是一个jsFiddle来演示我的问题：
http://jsfiddle.net/kannix/jSj83/

如果您只需点击绘图，一切都按预期工作。如果在隐藏时单击显示/隐藏，单击绘制按钮，单击显示/隐藏将显示画布，但仍然为空。 解析方案 div>

你不能那样做。

在技术上，画布不能以这种方式进行交互。但是，您可以指示画布在隐藏时绘制特定图像。只要确保在展示时不清除它。

虽然用户隐藏，但不能绘制。 如果您只是点击显示/隐藏后，要保持可见状态，从您的jQuery中删除 ctx.clearRect（0，0，100，100）; 。

I'm trying to draw in a canvas while its parent is display:none. Is there a way to do that?

Here is a jsFiddle to demonstrate my problem: http://jsfiddle.net/kannix/jSj83/

If you just click draw, everything works as expected. If you click Show/Hide and while hidden, click the Draw Button, a click on Show/Hide will reveal the canvas but its still empty.

解决方案

You cannot do that.

The canvas, while technically there, cannot be interacted with in that way. You could, however, instruct the canvas to draw a specific image while it's hidden. Just make sure you don't clear it when showing.

The user cannot draw while it is hidden though.

If you just want what is drawn to stay visible after clicking show/hide, remove ctx.clearRect(0, 0, 100, 100); from your jQuery.

这篇关于在隐藏的html5 canvas元素中绘制不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！