但要來做一些與我們一般數學座標系相同的事情時，
就會產生一些不方便，
來示範一下如何將canvas的座標(0,0)改到左下角
原始的程式
=========================================
<html><title></title>
<head></head>
<body>
<canvas id="square" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("square");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();
</script>
</body>
</html>
=======================================
其實加上兩行就可以了，
context.translate(0, canvas.height);
context.scale(1, -1);
完整程式
=======================================
<html><title></title>
<head></head>
<body>
<canvas id="square" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("square");
var context = canvas.getContext("2d");
context.translate(0, canvas.height);
context.scale(1, -1);
context.beginPath();
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();
</script>
</body>
</html>
=======================================
沒有留言:
張貼留言