- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果我在黑色背景上绘制一个绿色圆圈,然后用黑色绘制相同的圆圈,则会留下绿色阴影/发光。该圆圈实际上并未被删除。
如何使其再次纯黑并消除辉光?
我尝试过context.shadowColor = "transparent";
这是一个片段:
context.beginPath();
context.arc(x-1, y-2, 2, 0, 2*Math.PI);
context.fillStyle = "#FF0000";
//context.strokeStyle = "#FF0000";
//context.stroke();
context.fill();
context.beginPath();
context.arc(x-1, y-2, 2, 0, 2*Math.PI);
context.fillStyle = "#000000";
//context.strokeStyle = "#000000";
//context.stroke();
context.fill();
这是完整的对象:
最佳答案
如何清除 Canvas 。
根据您提供的图像的外观,您想要编写某种游戏或某种动画。
完成游戏和动画的一般方式是每帧重新绘制整个游戏屏幕。这极大地简化了渲染引擎的设计。只需更改绘制顺序即可轻松将一件事绘制在另一件事之上。要让某些东西消失,只需不渲染它即可。
我假设您知道如何加载图像
清除屏幕
您有多种方法可以清除屏幕。
// assuming ctx is the 2d Context and width and height are the canvas width and height.
ctx.clearRect(0, 0, width, height);
或者用矩形填充屏幕。
var backgroundColour = "#000";
ctx.fillStyle = backgroundColour;
ctx.fillRect(0, 0, width, height);
或者使用背景图片
var backgroundImage = new Image();
backgroundImage.src = "backgroundImage URL";
// then wait for image to load.
// then
ctx.drawImage(backgroundImage, 0, 0, width, height);
绘制 Sprite
现在您可以绘制图形了。同样,有很多方法可以做到这一点。一种方法是保留所有对象的列表,并在屏幕清除后一次性将它们全部绘制出来。
// create or load a game sprite (image)
var gameSprite = new Image();
gameSprite.src = "gameSprite URL";
// create a list of sprites.
var mySprites = [
{x : 10, y : 10, image : gameSprite}, // sprite 1
{x : 30, y : 60, image : gameSprite}, // sprite 2
{x : 70, y : 40, image : gameSprite} // sprite 3
];
// itterate the list and draw each sprite one at a time.
function renderSprites (spriteList) {
var i,len,s;
len = spriteList.length;
for (i = 0; i < len; i++) {
s = spriteList[i];
ctx.drawImage(s.image, s.x, s.y);
}
}
全部动画化
最后一件事是您需要将其与显示硬件同步,以便它以可能的最大帧速率运行,并且不会产生诸如剪切或闪烁之类的伪影。为此,您可以使用与 setTimeout
类似的 requestAnimationFrame
,但您不提供浏览器负责处理的时间。
您需要向 requestAnimationFrame
提供一个主循环函数,以便在浏览器准备好绘制下一帧时调用。在此函数中,您首先清除屏幕,执行游戏逻辑,绘制所有 Sprite ,然后请求下一帧(尽管您可以在主循环内的任何阶段请求下一帧)。
function mainLoop(time){ // requestAnimationFrame adds the argument (time).
// This is the time in milliseconds.
// clear the screen
ctx.drawImage(backgroundImage,0,0,width,height);
// do game logic here
renderSprites(mySprites); // draw the sprites
// now request the next frame and do it all again.
requestAnimationFrame(mainLoop);
}
// start the animation by requesting the first frame.
requestAnimationFrame(mainLoop);
它将以 60fps(每秒帧数)运行,并且可以轻松处理超过 100 个 Sprite (除了最基本的设备外)
关于javascript - 消除 HTML5 Canvas 绘图中的辉光?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35384569/
我编写了一些运行速度很慢的 VBA 代码。我的代码中有一系列不同的循环。我知道循环并不总是处理数据的最有效方式,所以我认为它们是问题所在。我需要有关如何更改或消除循环的想法,以便加快代码的运行时间。
我目前有一个网址:http://testsite.local/search/?q=findme一旦有人查询,我的搜索页面。我使用 mod_rewrite 重写了一些页面,想知道是否可以将其变成一个不错
有人可以帮助我执行一个查询,其中查询的重复元素被删除 Select * from table where APPNAME = 'Ap1' or APPNAME= 'Ap2' 使用 DISTINCT 的
我正在尝试在 ubuntu 上使用以下命令在一个文件夹中查找文件并通过 FFmpeg 提供并输出到另一个文件夹。问题是当它处理输出路径和文件名时,它添加了一个 .像这样的路径:/conversions
这个问题在这里已经有了答案: How can I remove all duplicates so that NONE are left in a data frame? (3 个答案) 关闭 1
我想证明以下定理: Theorem Frobenius (A: Set) (q: Prop) (p: A -> Prop) : (q \/ forall x : A, p x) -> (foral
我有一个 PHP 脚本,它只需要一些数据,将其分隔为制表符分隔格式,将其保存为 .xls 文件,然后为用户提供下载链接。 大多数情况下运行良好,但有些人正在获取导出的 .xls 文件的缓存版本。 我想
我有一个看起来有点像这个可重现代码的数据框,我想删除每列的异常值(在我们的例子中,数据点低于或高于平均值 2.5 个标准偏差)而不删除整个主题/行。 Subj mn + sd * 2.5) | (x
我正在尝试编写一个实现 fmap 的演示。在 Haskell 中与 continuation ,我的代码如下所示: #include #include template using Callba
在此 HighCharts例如,如何消除 xaxis 开始位置与 Jan 的刻度位置之间的差距。 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-s
重现步骤: 将TPanel添加到新的VCL表单并设置Align = alClient。 将 TSpeedButton 添加到面板,并将一些 bmp 图像分配给 Glyph 属性。 (可选,但更清晰:F
我得到一个 JavaScript 数组,其中包含一定数量(未指定)的各种元素(字符串、数字、 bool 值)。我需要消除字符串和 bool 值。我应该如何处理它?我应该使用typeof吗? 最佳答案
我正在寻找一个公式,可以消除字符串中空格后的空格和无用字符。 我的第一 react 是执行以下操作:=LEFT(A1,FIND("",A1)) 它适用于所有有空格的情况 但是如果单元格中没有空格,我的
我有以下问题:我正在尝试编写一个 Javascript 游戏,并且 Angular 色由箭头键控制。 问题是,当一个人按住按键时,在触发第一个按键和重复的按键之间存在短暂的延迟。 另外,当按下“向右箭
让我们考虑一个集合的集合,以及需要在管道内对内部集合的每个元素执行的操作。 为了简单起见,让它成为一个数组数组,操作简单的打印到屏幕上。为了表达我的问题,让我们还有一个元素不是集合的数组: $Arra
跟进this question关于包含源文件。我包括一个 Chapel 模块,其中包含一个名为 classes.chpl 的文件。 ,但我当前的项目也有一个 classes.chpl 。正确的消歧模式
我想知道如何在英特尔语法中的某些指令中区分标签名称和寄存器名称。例如,call rdx通常意味着间接跳转,但是如果我们在同一个汇编文件中有一个标签rdx怎么办?我相信它可以被解释为直接跳转到 rdx
据我了解,Chrome 会异步运行整个程序,这会导致我的扩展程序在单击后大约 2 秒后打开。有没有办法强制扩展程序显示带有“正在加载”消息的 html 页面,然后完成加载 javascript 并用内
我正在将 CSV 加载到 sqlite 数据库,如下所示: sqlite3 /path/to/output.db /dev/null 或者,您可以自己生成 SQL 命令,以便可以使用 INSERT 或
我的 .cabal 文件的许多节中经常有类似的属性。例如 Library x ... ghc-options: -O2 -Wall -fno-warn-missing-s
我是一名优秀的程序员,十分优秀!