Canvas的图形变换

最新推荐文章于 2020-06-01 09:49:10 发布

PaigeWw

最新推荐文章于 2020-06-01 09:49:10 发布

阅读量441

点赞数

分类专栏： =====HTML5===== Canvas

本文链接：https://blog.youkuaiyun.com/u013899738/article/details/51451670

版权

=====HTML5===== 同时被 2 个专栏收录

6 篇文章

订阅专栏

Canvas

6 篇文章

订阅专栏

本文详细介绍了如何使用Canvas API中的translate、rotate、scale等函数进行图形变换，以实现绘制星形的目的。同时，文章还阐述了变换矩阵的概念及其在Canvas中的应用。读者将了解到如何在绘制前保存上下文并在绘制后恢复，以实现精确的图形变换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在图形学中，一般先画出原形，再通过图像变换得到目的图形

Canvas提供的图形变换API：

位移：translate(x,y)
旋转：rotate(deg)
缩放：scale(se,sy)：不单只放大图形大小，也会放大其他属性
!在Canvas的图形变换函数是叠加的，
所以：
绘制前：context.save()
绘制后：context.restore()

   function drawStar(cxt,x,y,R,rot){

        cxt.save();
        
        //图形变换
        cxt.translate(x,y);
        cxt.rotate(rot/180*Math.PI);
        cxt.scale(R,R);
        
        cxt.beginPath();
        starPath(cxt);
        cxt.closePath();

        cxt.fillStyle="#fb3";
        cxt.fill();
        
        cxt.restore();
    }

    function starPath(cxt){
        cxt.beginPath();
        for(var i=0;i<5;i++) {

            cxt.lineTo(
                    Math.cos((18 + i * 72) / 180 * Math.PI),
                    -Math.sin((18 + i * 72 )/180 * Math.PI)
            );
            cxt.lineTo(
                    Math.cos(( 54 + i * 72) /180 * Math.PI)*0.5,
                    -Math.sin((54 + i * 72) /180 * Math.PI)*0.5
            );

        }
        cxt.closePath();
    }

变换矩阵
|a c e|
|b d f|
|0 0 1|
a水平缩放（默认1）
b水平倾斜（默认0）
c垂直倾斜（默认0）
d垂直缩放（默认1）
e水平位移（默认0）
f垂直位移（默认0）

设置变换矩阵：

transform(a,b,c,d,e,f):与之前transfrom效果叠加

settransform(a,b,c,d,e,f):与之前transfrom效果无关