个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试构建一个可以实时或逐帧更新 HTML Canvas 的基本渲染器。
例如，一旦绘制了一个像素，它就会立即更新到屏幕或等待收集一帧，然后更新(例如每秒 25 帧)
目前我的代码不会以任何方式发生这种情况，我不确定如何让它工作。
现在，只有在所有操作完成后 Canvas 才会绘制到屏幕上。
Canvas.js:
$(document).ready(function(){
main();
});
function main(){
var c = document.getElementById('canvas');
var ctx = c.getContext("2d");
for(var x=0; x<1000000; x++){
drawPixel(ctx, "200", "200", "200", "255", randomNumber(0, 1000), randomNumber(0, 600));
}
}
function drawPixel(context, red, green, blue, alpha, x, y){
context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha/255) + ")";
context.fillRect(x, y, 1, 1);
}
function randomNumber(min, max){
return Math.floor(Math.random()*(max-min+1)+min);
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen"></style>
<meta name="viewport" content="initial-scale=1">
</head>
<body>
<div class="container">
<canvas height="600" width="1000" id="canvas">
</canvas>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>
</body>
</html>
我需要知道如何在需要时更新屏幕，而不是在我的代码完成后立即更新所有屏幕。
编辑:基本上，我想要的是所有点逐渐出现，以便用户可以看到点的累积。有没有一种方法可以每 25 秒收集一次点，将其渲染为帧并重复？
最佳答案
您只需打破 for 循环的“同步性”，因为浏览器正在同一重绘中完成所有 drawPixel 调用。
相反，使用 requestAnimationFrame在浏览器的自然重绘间隔调用一个函数一次(这个，而不是 setTimeout 或类似的)。类似于:
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var counter = 0;
function run() {
drawPixel(0, 0, 0, 255, randomNumber(0, canvas.width), randomNumber(0, canvas.height));
counter++;
// If our counter is less than 10000, run again at the next repaint
if (counter < 10000) {
window.requestAnimationFrame(run);
}
}
function drawPixel(red, green, blue, alpha, x, y){
context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha/255) + ")";
context.fillRect(x, y, 1, 1);
}
function randomNumber(min, max){
return Math.floor(Math.random()*(max-min+1)+min);
}
run();<canvas height="100" width="100" id="canvas"></canvas>关于javascript - 以非阻塞方式更新 HTML Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28870431/
25
4
0
对于一个简单的聊天程序，我使用了一个通过 boost::python 包装的 c 库。 使用 PyQT 编写了一个简单的 GUI。接收消息是通过阻塞调用完成的lib说。对于独立刷新的 GUI，通信部分
当我创建以下内容时，我试图创建一个可以被异常终止的线程类(因为我试图让线程等待一个事件): import sys class testThread(threading.Thread): def
我正在用 Haskell 编写服务器，我想在客户端断开连接后显式关闭它们。当我调用 hClose ，线程将阻塞，直到客户端关闭其一侧的句柄。有没有办法让它在不阻塞的情况下关闭？ 提前致谢! 最佳答案
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: garbage collection Operation 我有几个相关问题。 1.JAVA垃圾收集器运行时，是否占用
我有一个 Angular 函数，它在初始 URL 中查找“列表”参数，如果找到，就会出去获取信息。否则我想获得地理位置。如果存在 URL 参数，我不想获取地理位置。我使用的术语是否正确？ constr
我读了很多关于锁定数据库、表和行的文章，但我想要较低的锁定，比如只锁定“操作”，我不知道如何调用它，假设我在 php 中有函数: function update_table() { //que
在我的多线程 mfc 应用程序中，m_view->SetScrollPos 处于阻塞状态并且所有应用程序都被卡住。 View 是在另一个线程中创建的，这是这种行为的原因吗？ //SetScrollPo
FreeSwitch 软件在几天内运行良好(~3 - 5 天)，然后由于 FreeSwitch 被阻止，新的来电请求被接受!!正在进行的调用继续他们的 session ，他们的调用似乎没有受到影响，但
我有一组按钮，当鼠标悬停在这些按钮上时，它们会改变颜色。这些的 CSS 以这种方式运行: #navsite ul li button { height: 60px; width: 60
由于某些原因，当我调用 WSARecvFrom 时，该函数在接收到某些内容之前不会返回。 _socket = WSASocket(AF_INET, SOCK_DGRAM, IPPROTO_UDP, N
我了解一些关于 Oracle 阻塞的知识——更新如何阻塞其他更新直到事务完成，写入者如何不阻塞读取者等。 我理解悲观和乐观锁定的概念，以及有关丢失更新等典型银行教科书示例。 我也理解 JDBC 事务隔
在两个代码点之间，我是否可以判断进程是否已被内核抢占，或者更确切地说，当时是否有任何其他代码在同一处理器上运行？ //Point A some_type capture = some_capture(
这是我在 Oracle 的面试问题。 有一个堆栈，即使堆栈已满，push 操作也应该等到它完成，即使堆栈为空，pop 操作也应该等到它完成。 我们怎样才能做到这一点？ 我的回答 让一个线程做push
我想知道是否有人可以告诉我如何有效地使用循环平铺/循环阻塞进行大型密集矩阵乘法。我正在用 1000x1000 矩阵做C = AB。我按照 Wikipedia 上的循环平铺示例进行操作，但使用平铺得到的
我正在阅读有关绿色线程的内容，并且能够理解这些线程是由 VM 或在运行时创建的，而不是由操作系统创建的，但我无法理解以下语句 When a green thread executes a blocki
我正在创建的 JavaScript API 具有以下结构: var engine = new Engine({ engineName: "TestEngine", engineHost
ChildWindow 是一个模态窗口，但它不会阻塞。有没有办法让它阻塞？我基本上想要一个 ShowDialog() 方法，该方法将调用 ChildWindow.Show() 但在用户关闭 Child
我需要一些关于如何调试 10.6 版本下的 Cocoa 并发问题的指导。我正在将“for”循环转换为使用 NSOperations，但大多数时候，代码只是在循环的某个时刻卡住。我可以在控制台中看到 N
我正在使用 ReportViewer 控件和自定义打印作业工作流程，这给我带来了一些问题。我的代码看起来有点像这样: ids.ForEach(delegate(Guid? guid)
我有以下成功复制文件的代码。但是，它有两个问题: progressBar.setValue() 之后的 System.out.println() 不会打印 0 到 100 之间的间隔(仅打印“0”直到
我是一名优秀的程序员,十分优秀！