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

本文转载自查看原文 2019-07-04 15:17 1435 canvas

在使用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 onload="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 canvasHeight=240;

        var context=canvas.getContext("2d");

        context.fillStyle = "white";
        context.fillRect(0, 0, canvasWidth, canvasHeight);

        context.strokeStyle = "black";
        context.fillStyle = "black";

        context.save();

        // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向

        context.save();
        context.translate(0,canvasHeight);
        context.rotate(getRad(180));
        context.scale(-1,1);


        // 画折线
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(50, 50);
        context.stroke();
        context.closePath();

        context.restore();

    }

    function getRad(degree){
        return degree/180*Math.PI;
    }
    //-->
</script>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。