【Canvas】将屏幕坐标系转换成笛卡尔坐标系

Canvas绘图里的坐标系是左上角为原点，向右为X正向，向下为Y正向，这被称为屏幕坐标系；

如果绘制的内容和几何无关，屏幕坐标系倒也没什么，熟悉了也就好了；

但如果要重现几何问题，那人工变换来变换去既伤脑筋，也没必要。

我们可以在绘制之前将ctx变换好，代码如下：

    // 进行屏幕坐标系到笛卡尔坐标系的变换，原点移动到画布中央，右方为X正向，上方为Y的正向
    context.translate(WIDTH/2,HEIGHT/2);
    context.rotate(getRad(180));
    context.scale(-1,1);

这个方法我在之前的博文也提到过。

但当时的问题是，图形必须和文字分开绘制，文字位置还需要单独计算一遍，这又做了一番无用功。

今天我看到同是博客园的网友“秋离”的函数，觉得很好。函数如下：

/**
 * 该片段实现文字反转
 * @param {*} ctx 即context
 * @param {*} text 绘制文字
 * @param {*} x 笛卡尔坐标系转换之前可以正常显示的X坐标
 * @param {*} y 笛卡尔坐标系转换之前可以正常显示的Y坐标
 */
function rotateText(ctx,text,x,y){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)
    ctx.fillText(text,0,0);
    ctx.restore();
}

原理是把倒置的文字再变换回去。

经过这样两重处理后，图形文字都正常了，如图：

另外我将canvas代码重新整理了一份模板，其中将坐标系变换，文字变换、前景后景动画绘制都细化好了，特此放在这里方便大家：

DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>屏幕坐标系到笛卡尔坐标系的转换title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        border:0px solid red;
        width:512px;height:512px;
     }

     style>
    head>

     <body onload="draw();">
        <div class="centerlize">
            <canvas id="myCanvas" width="512px" height="512px" style="border:1px dashed black;">
                出现文字表示您的浏览器还不支持HTML5
            canvas>
        div>
        
     body>
html>
<script type="text/javascript">

script>

END

Canvas.Math

【Canvas】将屏幕坐标系转换成笛卡尔坐标系

相关

标签