Canvas坐标系转换

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

HTML代码

	

		
	

y>

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();
	    };

运行效果

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

=======================【图二】==================

转载于:https://my.oschina.net/xleix/blog/811549