html vector2

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html vector2相关的知识，希望对你有一定的参考价值。

<html>
<body>
	<canvas id='canvas' width='300' height='300'></canvas>
	<script type="text/javascript">

	window.requestAnimFrame = (function(){
		return window.requestAnimationFrame			||
				window.webkitRequestAnimationFrame 	||
				window.mozRequestAnimationFrame		||
				function( callback ){
				window.setTimeout(callback, 1000 / 30);
				};
	})();
	
	var ctx = document.getElementById('canvas').getContext('2d');
	var t = 0;

	function drawPoint(x,y){
		ctx.fillStyle = "rgb(200,0,0)";
		ctx.fillRect(x*32-4, y*32-4, 8, 8);
	}

	function radToDeg(rad){
		return rad * (180 / Math.PI);
	}

	function degToRad(deg){
		return deg * (Math.PI / 180);
	}

	function rotate(vector, angle) {
		return {
			x: vector.x + Math.cos(degToRad(angle)),
			y: vector.y + Math.sin(degToRad(angle)),
		}
	}

	function drawArc(x,y,r,s,e){
		ctx.beginPath();
		ctx.arc(x * 32, y * 32, r, s, radToDeg(e));
		ctx.stroke();
	}

	function draw() {
		ctx.clearRect(0,0,300,300);

		var angle = t;
		var origin = {x:2, y:2};

		ctx.save();
		ctx.translate(origin.x * 32, origin.y * 32);
		ctx.rotate(degToRad(angle));
		ctx.fillStyle = "rgb(200,0,0)";
		ctx.fillRect(-4, -4, 8, 8);
		ctx.restore();

		var vector = rotate(origin, angle);

		var direction = {x:vector.x - origin.x, y:vector.y - origin.y};
		drawPoint(vector.x, vector.y);

		drawArc(origin.x, origin.y, 32, 0, angle);

		t += 1;

		requestAnimFrame(draw);
	}

	draw();
	</script>
</body>
</html>

以上是关于html vector2的主要内容，如果未能解决你的问题，请参考以下文章

Python @property

无法隐式转换类型'UnityEngine.Vector2？'到'UnityEngine.Vector2'

无法从“初始化列表”转换为“Vector2”

《Unity_API解析》第十四章 Vector2类Vector3类

Vector2.Normalize 函数，对对角线输出感到困惑

在标准向量中将元素分配给 Eigen::Vector2d 会引发错误