隐藏HTML5 Canvas元素

Hide a HTML5 Canvas element

本文关键字：元素 Canvas HTML5 隐藏      更新时间：2023-09-26

我尝试使用HTML5 Canvas标签，直到现在我才做到我想做的。但现在我试图隐藏在淡出画布元素(上下文)。返回错误为context.fadeOut is not a function

查看我的草稿:http://jsfiddle.net/t46Ze/4/

谢谢你的帮助。

EDIT>这里是我的首字母:http://jsfiddle.net/t46Ze/15/

EDIT>下面是Andrew的命题:http://jsfiddle.net/t46Ze/16/(带注释)

您正在尝试淡出画布的2D上下文，而不是画布元素本身。让元素本身淡出。

用$(canvas).fadeOut代替context.fadeOut

你可以完全按照你所做的去画，但是反过来，

http://jsfiddle.net/t46Ze/15/

您可以尝试使用jQuery。

<html>
<head>
    <!-- Path to your jQuery core js library or you can use one from Google.
    <script type="text/javascript" src="jquery.min.js" />
    <!-- Path to your jQuery UI js library or you can use one from Google.
    <script type="text/javascript" src="jquery-ui.min.js" />
</head>
<body>
   <canvas id="myCanvas" ..>..</canvas>
</body>
</html>

当你想让它淡出时，只需调用:

$("#myCanvas").fadeOut(2500); // 2 seconds and a half, for example

还有其他"效果"，如:

$("#myCanvas").slideUp(1500); // 1 and a half seconds, for example

我尝试了下面的代码在画布

<canvas id="newCanvas" style="display: none"></canvas>
相关文章：