Javascript HTML5制作虚线动画
作为HTML5游戏的新手,我只是想问一下是否有人知道是否可以沿路径设置虚线动画?想想诺基亚时代的蛇吧,用一条虚线 我有一条代表电流的虚线,我想将其动画化为“移动”,以显示电流正在流向某物 多亏了罗德在帖子上的回答,我画了一条虚线,但不知道从哪里开始画。有人知道从哪里开始吗 谢谢 根据的,它工作正常 我所做的: 添加一个介于0和99之间的开始参数 将虚线数组的内容相加,计算虚线大小 基于开始百分比计算dashOffSet作为dashSize的一部分 从x,y中减去偏移量,然后添加到dx,dy 只有在偏移量消失后才开始下降,是负数,记得吗 添加了一个setInterval,将起始值从0更新为99,步骤为10 更新 原始算法不适用于垂直线或负倾斜线。添加了一个检查,以便在这些情况下使用基于y坡度的倾斜,而不是基于x坡度的倾斜 更新代码:Javascript HTML5制作虚线动画,javascript,html,animation,canvas,path,Javascript,Html,Animation,Canvas,Path,作为HTML5游戏的新手,我只是想问一下是否有人知道是否可以沿路径设置虚线动画?想想诺基亚时代的蛇吧,用一条虚线 我有一条代表电流的虚线,我想将其动画化为“移动”,以显示电流正在流向某物 多亏了罗德在帖子上的回答,我画了一条虚线,但不知道从哪里开始画。有人知道从哪里开始吗 谢谢 根据的,它工作正常 我所做的: 添加一个介于0和99之间的开始参数 将虚线数组的内容相加,计算虚线大小 基于开始百分比计算dashOffSet作为dashSize的一部分 从x,y中减去偏移量,然后添加到dx,dy 只有
if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {
CanvasRenderingContext2D.prototype.dashedLine = function(x, y, x2, y2, dashArray, start) {
if (!dashArray) dashArray = [10, 5];
var dashCount = dashArray.length;
var dashSize = 0;
for (i = 0; i < dashCount; i++) dashSize += parseInt(dashArray[i]);
var dx = (x2 - x),
dy = (y2 - y);
var slopex = (dy < dx);
var slope = (slopex) ? dy / dx : dx / dy;
var dashOffSet = dashSize * (1 - (start / 100))
if (slopex) {
var xOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
x -= xOffsetStep;
dx += xOffsetStep;
y -= slope * xOffsetStep;
dy += slope * xOffsetStep;
} else {
var yOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
y -= yOffsetStep;
dy += yOffsetStep;
x -= slope * yOffsetStep;
dx += slope * yOffsetStep;
}
this.moveTo(x, y);
var distRemaining = Math.sqrt(dx * dx + dy * dy);
var dashIndex = 0,
draw = true;
while (distRemaining >= 0.1 && dashIndex < 10000) {
var dashLength = dashArray[dashIndex++ % dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
if (slopex) {
var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
x += xStep
y += slope * xStep;
} else {
var yStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
y += yStep
x += slope * yStep;
}
if (dashOffSet > 0) {
dashOffSet -= dashLength;
this.moveTo(x, y);
} else {
this[draw ? 'lineTo' : 'moveTo'](x, y);
}
distRemaining -= dashLength;
draw = !draw;
}
// Ensure that the last segment is closed for proper stroking
this.moveTo(0, 0);
}
}
var dashes = '10 20 2 20'
var c = document.getElementsByTagName('canvas')[0];
c.width = 300;
c.height = 400;
var ctx = c.getContext('2d');
ctx.strokeStyle = 'black';
var drawDashes = function() {
ctx.clearRect(0, 0, c.width, c.height);
var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);
if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.dashedLine(10, 0, 10, c.height, dashGapArray, currentOffset);
ctx.dashedLine(0, 10, c.width, 10, dashGapArray, currentOffset);
ctx.dashedLine(0, 0, c.width, c.height, dashGapArray, currentOffset);
ctx.dashedLine(0, c.height, c.width, 0, dashGapArray, currentOffset);
ctx.closePath();
ctx.stroke();
};
window.setInterval(dashInterval, 500);
var currentOffset = 0;
function dashInterval() {
drawDashes();
currentOffset += 10;
if (currentOffset >= 100) currentOffset = 0;
}
可以使用SNAPSVG库创建虚线动画 请在这里查看教程
@ariel,这正是我想要的!我已经玩了一整天了,不能让补偿正常工作。非常感谢!哦,我很喜欢JSFIDLE,我从来没有见过/听说过这样的事情!很适合把上面提到的东西拼凑在一起……哦,你的解决方案似乎不适用于y轴上的直线向下,但适用于x轴上的直线对角线或水平线。有什么想法吗?在这种情况下,斜率是无限的。。我想原来的算法也不管用。你必须检查dy>dx是否使用基于y的斜率。是的,我想这就是发生的情况。我将只在90°直线上使用它。比如var slope=dy>dx?dy/dx:y?谢谢@ariel,太棒了!我的解决方案遗漏了slopex的第二个检查,您的解决方案更加优雅。