Canvas 三角形动画轨迹

bao_yj 2019-03-14 07:02:58

如何使用canvas画出三角形从一个点到展示出全部三角形的动态轨迹？
网上都是球和矩形的动态轨迹实例或者更为复杂的动画，还麻烦大神给个简单的例子，谢谢。

...全文

288 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

nettman 2019-03-17

打赏
举报

引用 1 楼天际的海浪的回复:

三角形的动态轨迹其实就是连续做三个直线的动态轨迹，这个代码可以改成任意多边形的动态轨迹。把p.push(p[0]);去掉就是任意折线的动态轨迹



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> 页面名称 </title>

</head>

<body>

<canvas id="canvasId" width="400" height="350"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvasId");

var ctx = canvas.getContext("2d");

var p = [

	{x:200,y:50},

	{x:100,y:200},

	{x:300,y:200}

];

p.push(p[0]);

function go() {

	if (p.length>1)

		line(p[0],p[1]);

}



function line(p1,p2) {

	var vx = p2.x-p1.x, vy = p2.y-p1.y;

	var size = Math.max(Math.abs(vx),Math.abs(vy));

	vx /= size;

	vy /= size;

	var x = p1.x, y = p1.y;

	function run() {

		ctx.beginPath();

		ctx.moveTo(x,y);

		x += vx;

		y += vy;

		ctx.lineTo(x,y);

		ctx.stroke();

		if (--size>0) {

			setTimeout(run, 16);

		} else {

			p.shift();

			go();

		}

	}

	run();

}



go();



</script>

</body>

</html>

正解

天际的海浪 2019-03-15

打赏
举报

三角形的动态轨迹其实就是连续做三个直线的动态轨迹，这个代码可以改成任意多边形的动态轨迹。把p.push(p[0]);去掉就是任意折线的动态轨迹


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="350"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var p = [
	{x:200,y:50},
	{x:100,y:200},
	{x:300,y:200}
];
p.push(p[0]);
function go() {
	if (p.length>1)
		line(p[0],p[1]);
}

function line(p1,p2) {
	var vx = p2.x-p1.x, vy = p2.y-p1.y;
	var size = Math.max(Math.abs(vx),Math.abs(vy));
	vx /= size;
	vy /= size;
	var x = p1.x, y = p1.y;
	function run() {
		ctx.beginPath();
		ctx.moveTo(x,y);
		x += vx;
		y += vy;
		ctx.lineTo(x,y);
		ctx.stroke();
		if (--size>0) {
			setTimeout(run, 16);
		} else {
			p.shift();
			go();
		}
	}
	run();
}

go();

</script>
</body>
</html>

掌握canvas基本用法; 掌握手势解锁实现原理; 得到注释详尽的源码; 掌握canvas的学习方法

用canvas实现三角形渐变选择效果

本文将带大家基于Canvas封装的ZRender库，了解ZRender库中提供的animate绘制动画的方法，并且使用animate方法实现一个带有箭头流动效果的连线。

上次使用了canvas 的bezierCurveTo方法绘制曲线并实现小球运动轨迹。现在研究一下lineto怎么做到小球运动轨迹。（当然还没有研究 bezierCurveTo 是否可以绘制直线，之后有空在研究）先附上效果图：小球从 ...

Canvas的路径、动画，Three.js和地理位置