gpt4 book ai didi

jquery - 如何使用 HTML5 Canvas 复制 'skid marks'?

转载 作者:行者123 更新时间:2023-11-28 02:12:52 25 4
gpt4 key购买 nike

我一直在用 HTML5 Canvas 创建一个带有一些基本运动的汽车的小实验,这里是:(移动汽车的箭头键)

http://jsfiddle.net/mpxML/27/

我一直想弄清楚的想法是创建防滑标记的最佳方法。如果您按住向上键并转动,您会看到它创建了一些标记,但如果您再次这样做,它们就会连接在一起。显然我这样做的方式并不理想。它将坐标推送到一个数组,然后使用 lineTo 链接这些坐标。

问题: - 线路连接起来 - 将坐标插入数组以记住打滑可能不是最好的方法 - 我只有一行,所以当我添加另一行时,性能会进一步下降。

你有什么建议?

偷偷摸摸的问题:除了固定背景,什么是让场景“平移”的最佳方式。

谢谢,亨利

最佳答案

试试这个 http://jsfiddle.net/mpxML/34/ .

我添加了 MIN_DIST_TO_DRAW_SKID 变量。如果 skidMarks 中的两个点比该值更远,则 Canvas 不会画线(只需调用 moveTo 方法)。

这是我修改的部分代码:

// here
var MIN_DIST_TO_DRAW_SKID = 30;

function drawStageObjects() {

if(car.drift > 30 || car.drift < -30) {
skidMarks.push(car.x, car.y);
} else {
}

context.beginPath()
context.moveTo(skidMarks[0],skidMarks[1]);
for(var i=0; i < skidMarks.length; i = i + 2) {

skidPoint = Math.abs(skidMarks[(skidMarks.length-4)]) - Math.abs(skidMarks[(skidMarks.length-2)]);

// here
var dist = Math.sqrt((skidMarks[i] - skidMarks[i - 2]) * (skidMarks[i] - skidMarks[i - 2])
+ (skidMarks[i + 1] - skidMarks[i - 1]) * (skidMarks[i] - skidMarks[i - 1]));

if(skidPoint > 20 || dist > MIN_DIST_TO_DRAW_SKID) {
context.moveTo(skidMarks[i], skidMarks[i + 1]);
} else {
context.lineTo(skidMarks[i],skidMarks[i + 1]);
}

$('#stats').html(skidPoint);
//$('#stats').html(skidMarks[(skidMarks.length-4)] + "," +skidMarks[(skidMarks.length-2)]);
}

//....
}

关于jquery - 如何使用 HTML5 Canvas 复制 'skid marks'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7163894/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com