canvas中状态保存与回滚，和平移/旋转/缩放的应用

最新推荐文章于 2025-05-14 12:34:36 发布

原创最新推荐文章于 2025-05-14 12:34:36 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

canvas 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用HTML5 Canvas API中的保存与回滚状态、平移、旋转及缩放等变换方法，实现精确控制图形绘制的位置和方向，特别聚焦于在不干扰其他元素的情况下完成图形旋转的具体步骤。

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

1.1、状态保存：ctx.save();

把当前状态（绘制环境的所有属性）复制一份保存起来，多次调用可以保存多份状态

1.2、状态回滚：restore();

把最近保存的一次状态作为当前状态
回滚一次会把上次保存的属性删掉
- 再回滚会拿到上次保存的属性
可多次回滚，一次往回找save保存的属性

2.1、translate（x轴平移量，y轴平移量）

平移坐标轴：已绘制的图形不会收到影响，只会影响平移之后绘制的，平移会累加

2.2、rotate（弧度）

旋转坐标轴：已绘制的图形不会收到影响，只会影响平移之后绘制的，旋转会累加

2.3、scale（ x轴缩放比例，y轴缩放比例）

缩放坐标轴：已绘制的图形不会收到影响，只会影响平移之后绘制的，缩放会累加

怎么在不影响其他元素的情况下进行旋转？

1、状态保存

2、平移到旋转图形的中心点

3、进行旋转

4、绘制图形的时候起点x为负的宽度的一半，y为负的高度的一半

5、状态回滚到原先的状态

<canvas id="cvs" width="500" height="500"></canvas>

 //在100，100的点上绘制一个50*50，旋转45度的矩形

    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    //保存默认状态
    ctx.save();

    //平移到矩形中心点
    ctx.translate(125, 125);

    //旋转45度
    //注意rotate的值要用弧度
    ctx.rotate( Math.PI / 180 * 45);

    ctx.fillRect(-25, -25, 50, 50);

    //回滚到之前的默认状态
    ctx.restore();