其他分享
首页 > 其他分享> > 【Canvas】将屏幕坐标系转换成笛卡尔坐标系

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

作者:互联网

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

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

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

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

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

这个方法我在之前的博文 https://www.cnblogs.com/heyang78/p/7591175.html 也提到过。

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

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

复制代码
/**
 * 该片段实现文字反转
 * @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 onl oad="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">
<!--
// 画布宽度
const WIDTH=512;
// 画布高度
const HEIGHT=512;

// 旋转角
var alpha=0;    

//-------------------------------
// 开始绘制
//-------------------------------
function draw(){
    var canvas=document.getElementById('myCanvas');    
    canvas.width=WIDTH;
    canvas.height=HEIGHT;    

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

    slot=new Slot();
    animate();
};

//-------------------------------
// 有条件执行动画
//-------------------------------
function animate(){    
  
    slot.update(alpha);
    slot.paintBg(context);
    slot.paint(context);

    alpha+=0.5;

    if(alpha<2000){        
        window.requestAnimationFrame(animate);
    }
}

//-------------------------------
// 光阑对象
//-------------------------------
function Slot(){
    var obj=new Object;

    obj.alpha=0;

    // 更新内部变量alpha
    obj.update=function(alpha){
        this.alpha=alpha;
    };

    // 画固定件
    obj.paintBg=function(ctx){
        // 清屏
        context.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        let ax=200,ay=0;
        let bx=0,by=200;

        ctx.strokeStyle='black';
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(ax,ay);
        ctx.closePath();
        ctx.stroke();

        ctx.strokeStyle='black';
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(bx,by);
        ctx.closePath();
        ctx.stroke();

        ctx.stokeStyle='black';
        ctx.font = '10px "微软雅黑"';          
        ctx.textBaseline = "bottom";            
        ctx.textAlign = "center";  
        
        drawText(ctx,'X正向',ax,ay);
        drawText(ctx,'Y正向',bx,by);
    };

    // 画活动件
    obj.paint=function(ctx){
        
    };
    
    return obj;
}

//-------------------------------
// 角度得到弧度
//-------------------------------
function getRad(degree){
    return degree/180*Math.PI;
}

//-------------------------------
// 得到颜色
//-------------------------------
function getColor(index){
    var arr=["green","skyblue","purple","#aa0000",
             "orange","yellow","maroon","navy",
             "red","blue","lime","teal","fuchsia",
             "aqua","black"];

    if(index>arr.length){
        index=index % arr.length;
    }

    return arr[index];
}

//-------------------------------
// 在笛卡尔坐标系中绘制文字
// 此函数是为防止屏幕坐标系变成笛卡尔坐标系后文字出现倒置
// 原作者为博客园的秋离,出处为https://www.cnblogs.com/ScottQee/p/13359713.html
//-------------------------------
function drawText(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();
}
//-->
</script>
复制代码

END

标签:文字,Canvas,笛卡尔,变换,text,ctx,坐标系
来源: https://www.cnblogs.com/pyhy/p/15780320.html