canvas坐标系原点

2018-9-10 09:47| 作者: admin| 查看: 2232| 评论: 0|来自: 蚂蚁部落

原点类似于数学中坐标系(0,0)点坐标,默认情况下,画布左上角为原点。

但是与数学概念坐标系不同的是,y轴向下为正,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/21/203649blzk8qk9u8h3yuyn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload=function(){
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.fillStyle = "green";
  ctx.rect(10, 10, 100, 100);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

默认,原点位置是画布的左上角,位置可以调整。

如果某点被确定为原点,不管原本坐标是多少,当前坐标都是(0,0)。

使用translate方法可以重新设置原点位置,具体参阅canvas translate()位移一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部