帆布动画与.clearRect（X，Y，W，H） [英] canvas animation with .clearRect(x,y,w,h)
问题描述
我在使用JavaScript和画布相对初学者。我会试着解释一下我到目前为止已经完成。我有一个外部的样式表，我已经设置画布元素的背景（它是落后了到地平线的道路背景图像）。我已经那么创造了这个第一个函数（drawRoad（））来绘制白色的道路中央的薄带，并将其关闭落后与路面的视野。我已经然后创建了另一个功能（roadLines（）），它插在该白条的空间。我很高兴与它的外观到这里为止。
我想现在要做的就是通过... drawRoad（）一个周期来运行，那么roadLines（），然后再清除画布，然后drawRoad（），然后更改roadLines的）位置（和呼叫再此功能。我想移动roadLines的位置（）向下垂直，以便它给行驶在道路上的效果。 （我希望这是有道理的？）我要对这个正确的方式？还是有更简单的方法来做到这一点是我完全可以俯瞰？
任何建议将是多少AP preciated。下面是我到目前为止已经完成。此外，功能动画（）是在底部，但它是所有调用drawRoad（），然后调用roadLines（）。
window.requestAnimFrame =（函数（回调）{
返回window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
函数（回调）{
window.setTimeout（回调，1）;
};}）（）;在画布上绘制//设置功能
功能drawRoad（）{
变种myCanvas =的document.getElementById（myCanvas）;
变种CTX = myCanvas.getContext（2D）;
ctx.clearRect（0，0，myCanvas.width，myCanvas.height）;
ctx.beginPath（）;
ctx.moveTo（471，199）;
ctx.lineTo（467，600）;
ctx.lineTo（475，600）;
ctx.closePath（）;
ctx.fillStyle =RGB（255，255，255）;
ctx.fill（）;
ctx.lineWidth = 1;
ctx.strokeStyle =RGB（255，255，255）;
}//设置变量和函数/ for循环创建道路标记和运动的间距/间隔
功能roadLines（）{
VAR间隔= 1;
变种空间= 1;
变种myCanvas =的document.getElementById（myCanvas）;
变种CTX = myCanvas.getContext（2D）;
对于（VAR道路线= 199;道路线＆LT; 600;道路线=道路线+间隔）{
间隔时间=（间隔* 1.1）;
空间=（空间* 1.05）;
ctx.clearRect（450，道路线，40，空间）;
}
}功能动画（）{
drawRoad（）;
roadLines（）;
}
您需要做的第一件事就是居然有动画循环做一个循环。由于这是现在它只是打电话给你的两个函数一次，然后退出，所以第一次调整可以是：
功能动画（）{
drawRoad（）;
roadLines（）; requestAnimationFrame（动画）; ///启用循环
}
（PS：请确保您重命名 requestAnimFrame 聚填写 requestAnimationFrame ，见下面的演示链接）
我们当然会需要同时启动动画循环，这样的地方，我们刚刚从全球范围内调用它：
动画（）;
我们需要确保接下来的事情是，你的行动，所以我们可以看到他们的动画。
简单地提供一个偏移量为code现在是不会因为你不绑定到任何画面几何已经扩展开箱直工作。
这将要么使行跳跃当您尝试循环他们通过复位偏移，或该线将在扩大规模的循环，如果你选择不复位运行时间越长，所抵消。
所以，你将不得不重新考虑你如何画线或做出了妥协。
有关的妥协，你需要找到你复位偏移回路中的甜蜜点的价值。慢行移动更加明显小跳跃会。
为了使线条显得光滑但是，您将需要实现一些简单的3D投影（或2.5D伪3D类似于你已经拥有，但势必会显示）。
这是一个在线演示 在线条现在使用动画抵消。我在底部增加了一个滑块，你可以找到最佳点偏移的限制。实验用它来看看它是如何工作的。我并没有实现该行的3D投影，但用什么你已经有了，但我有基于理解的基本这里将是第一个步骤后的感觉。
I'm a relative beginner in using javascript and canvas. I'll try explain what I've done so far. I have an external style sheet, and I've set the background of the canvas element (it's background image of a road that trails off into the horizon). I have then created this first function (drawRoad()) to draw a thin strip of white down the center of the road, and have it trail off into the horizon with the road. I have then created another function (roadLines()) which inserts spaces in this white strip. I'm happy with how it looks here so far.
What I want to do now is to run through a cycle of... drawRoad(), then roadLines(), then clear the canvas, then drawRoad() again, and then change the position of roadLines() and call this function again. I want to move the position of roadLines() downwards vertically, so that it gives the effect of travelling down the road. (I hope this makes sense?) Am I going about this the right way? Or is there a much easier way to do it that I'm completely overlooking?
Any suggestions would be much appreciated. Below is what I've done so far. Also, the function animate() is at the bottom, but all it does is call drawRoad() and then call roadLines().
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1);
};})();
// set function that draws in the canvas
function drawRoad() {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.beginPath();
ctx.moveTo(471, 199);
ctx.lineTo(467, 600);
ctx.lineTo(475, 600);
ctx.closePath();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "rgb(255, 255, 255)";
}
//set variables and function/for loop that creates the spacing/intervals for road markings and movement
function roadLines() {
var interval = 1;
var space = 1;
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
for (var roadLine = 199; roadLine < 600; roadLine = roadLine + interval) {
interval = (interval * 1.1);
space = (space * 1.05);
ctx.clearRect(450, roadLine, 40, space);
}
}
function animate() {
drawRoad();
roadLines();
}
The first thing you need to do is to actually have the animation loop doing a loop. As it is now it just call your two functions once and then quits, so first adjustment can be:
function animate() {
drawRoad();
roadLines();
requestAnimationFrame(animate); /// enable a loop
}
(ps: make sure you rename the poly-fill from requestAnimFrame to requestAnimationFrame, see demo link below).
We will of course need to also start the animation loop so somewhere we just call it from global scope:
animate();
The next thing we need to make sure is that your lines are moving so we can see them animate.
Simply providing an offset as the code is now won't work straight out of the box as you have scaling in not bound to any screen geometry.
This will either make the lines "jumpy" when you try to loop them by resetting the offset or, the lines will grow in size the longer the loop runs if you choose not to reset the offset.
So you will have to reconsider how you draw the lines or make a compromise.
For a compromise you would need to find a "sweet spot" value where you reset the offset loop. The slower the line moves the more visible the small "jump" will be.
In order to make the line appear smooth however, you will need to implement some simple 3D projection (or 2.5D pseudo 3D similar to what you already have but bound to display).
Here is an online demo where the lines are now animated using offset. I added a slider at the bottom so you can find the sweet-spot for offset limit. Experiment with it to see how it works. I did not implement 3D projection of the line but used what you already have but I have the feeling based on the post that understanding the basic here will be the first steps.
这篇关于帆布动画与.clearRect（X，Y，W，H）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
