小编tyl*_*zie的帖子

我最近开始学习使用HTML5 Canvas,我真的有很多问题.一切都与表现有关.我明白,所有这一切对我正在做的事情都是非常主观的.但我只是希望获得一些清晰度.

在用玩家的鸟瞰图创建游戏的例子中.所有2d都有一个在X轴和Y轴上滚动的地图.

问题1:据我所知,只要我的地图画布中没有移动物体.做一些像我创建一个大画布元素然后使用JS滚动页面/移动画布更有效率.而不是创建一个与我的屏幕大小相同的画布,翻译画布并重新绘制每个动作的地图.

问题2:如果我使用上面的方法来设置一个大型画布来滚动我的地图.画布上的简单绘图和复杂的绘图之间会有很大的性能差异吗？示例:简单画布,其中包含几行单色块,而复杂画布则包含数千个线条,圆形,渐变,图案和细节.如果这两个画布的宽度和高度相同,那么只要让浏览器滚动它们就不会有巨大的性能差异吗？(没有重绘).

问题3:是否有一种处理比画布对象大的地图的首选方法？我知道各种浏览器会限制画布的物理尺寸.在几个大的画布块中设计地图是否更好？当玩家靠近边缘时,将相邻的块加载到全新的画布元素中.或者这会导致问题.如果我正在使用像10,000px到10,000px的画布元素并且我开始并排放置其中的几个,我只是在寻找麻烦？我最好将其设计为在单个画布中运行,只需在播放器移动时重绘地图并保持地图的复杂性.并对其进行编程,使其不会考虑地图中与播放器不相近的部分.

我已经阅读了一些关于增加性能的技巧,比如分层画布而不是重新绘制画布而不是浏览器刷新.但是我一直在寻找有关处理大型地图的良好实践信息以及绕着它们移动的表现.

我真的很想听听大家的想法.

这肯定会推动我对我的知识的限制.

是否有计算二次贝塞尔曲线和直线之间交点的公式？

例:

在下图中,我有P1,P2,C(它是控制点)和X1,X2(我的特定计算只是X轴上的一条直线.)

我想知道的是T的X,Y位置以及红色曲线和黑色线交叉点处T处的切线角度.

在做了一点研究并找到这个问题后,我知道我可以使用:

t = 0.5; // given example value
x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

计算沿曲线任意给定点的X,Y位置.因此,使用它我可以沿着曲线循环遍历一堆点,检查是否有任何在我的交叉X轴上.并从那里尝试计算我的切线角度.但这似乎并不是最好的方法.任何数学大师都知道最好的方法是什么？

我想也许它比我想要的要复杂得多.

是否有某种技巧可以在 2d 空间中创建具有多个停靠点的渐变？我想做的是在我的画布中创建一个矩形，然后在每个角落都有一个不同的颜色停止。

我尝试创建 4 个渐变，每个角落一个，指向对角。（尝试线性和圆形）。但这不会产生我想要的效果，因为中心总是以圆形方式偏离颜色。

我想要的效果类似于将 2 个线性水平渐变放在彼此的顶部。然后是第三个垂直线性渐变，它不会影响前两个渐变的颜色，但只会在下降时将底部渐变淡入顶部渐变。所以顶部的两个角是第一个线性渐变，底部的两个角是第二个线性渐变。

我尝试过使用 globalCompositeOperation 但我能够实现的最接近的是 3 边渐变。不是 4。

我能想到的唯一方法是一次构建我的矩形一行。每条线都有一个线性渐变，重新计算并稍微改变，以便在绘制底线时它是第二个渐变。但这似乎不是最有效（或最容易编程）的方法。

图片

我想我在这里太新了，无法链接到照片。但这里是我的谷歌照片上 3 张图片的链接。

https://plus.google.com/photos/116764547896287695338/albums/6094993027344790369?authkey=CJnZ0I3JxbOMag

图 1：第一个渐变（设置顶部两个角的颜色）

图2：第二个渐变（设置底部两个角的颜色）

图像 3：图像 1 和 2 垂直混合在一起，使顶部的两种颜色淡入底部的两种颜色。

我想使用点表示法规则（任何字母或数字以及只要它不以数字开头）快速检查字符串是否可以有效用作属性名称，_显然$如果括号表示法使用后一切都有效。

我一直在尝试找出正则表达式解决方案，但我对正则表达式的了解并不多。我认为我当前的模式将允许字母、数字，$但_我不知道如何禁止以数字开头

function validName(str){
    // check if str meets the requirements 
    return /^[a-zA-Z0-9$_]+$/.test(str);
}

validName("newName")    // should return TRUE
validName("newName32")  // should return TRUE
validName("_newName")   // should return TRUE
validName("4newName")   // should return FALSE
validName("new Name")   // should return FALSE
validName("")           // should return FALSE