Canvas坐标系转换

最新推荐文章于 2022-07-11 10:56:52 发布

weixin_33943836

最新推荐文章于 2022-07-11 10:56:52 发布

阅读量993

点赞数

原文链接：https://my.oschina.net/xleix/blog/811549

版权

为什么80%的码农都做不了架构师？>>>

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas 坐标系转换</title>
<style type="text/css">
</style>
</head>
<body bgcolor="#eee">
	<div align="center">
		<canvas id="myCanvas" height="501" width="800" style="background-color: #fff"></canvas>
	</div>
</body>
</html>y>
</html>

JS代码

        var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		//构建数学平面直角坐标系
		ctx.translate(400,500);//重置原点坐标
		ctx.rotate(Math.PI)//将坐标系旋转180°，得到与数学坐标系水平相反的坐标系，如图一
		ctx.scale(-1, 1);//将坐标系水平翻转，如图二
		
		drawLine(-400, 0, 400, 0);//x轴
		drawLine(0,0,0,450);//Y轴
		drawLine(0, 0, 200, 200);//测试线
		
		
		function drawLine(x1,y1,x2,y2){
			ctx.moveTo(x1,y1);
			ctx.lineTo(x2,y2);
			ctx.stroke();
	    };

运行效果

=======================【图一】==================