将canvas中左上角的原点坐标位置改为左下角

最新推荐文章于 2023-04-14 00:23:18 发布

weixin_30800807

最新推荐文章于 2023-04-14 00:23:18 发布

阅读量2.5k

点赞数 2

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/mmykdbc/p/11132634.html

版权

这篇博客介绍了如何通过JavaScript的canvas API，利用translate、rotate和scale方法改变canvas的坐标系统，使其原点位于左下角，以符合常见的笛卡尔坐标系标准。

摘要由CSDN通过智能技术生成

在使用canvas的时候，原点坐标在左上角，这个很犯人，因为一般的坐标基本都是在左下角，即笛卡尔坐标系，那怎么进行转变呢，在这里用到了canvas的translate，rotate，和scale进行转换，话不多说，上代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>笛卡尔坐标系</title>
</head>

<body οnlοad="draw()">
<canvas id="myCanvus" width="440px" height="240px" style="border:1px dashed black;">
    出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
    <!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var canvasWidth=440;
        var