欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

canvas 的 save和restore

程序员文章站 2024-03-24 09:07:58
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="400"></canvas>
    <script>
        var canvas = document.getElementById("canvas");  
        var context = canvas.getContext('2d');  
        context.lineWidth = "10";  
        context.strokeStyle = "#fe9901";  
        context.translate(canvas.width / 2, canvas.height / 2);  
   		// context.save();
        context.rotate( 30 / 180 * Math.PI);  
        context.beginPath();  
        context.moveTo(0, 0);  
        context.lineTo(200, 200);  
        context.stroke();  
        // context.restore();  
        context.rotate( 30 / 180 * Math.PI);  
        context.beginPath();  
        context.moveTo(0, 0);  
        context.lineTo(200, 200);  
        context.stroke();  
    </script>
</body>
</html>

首先 context.save存储的是 canvas 的一些属性和坐标系相关的一些值（比如旋转角度，平移量）
如上代码： 如果没有 save和restore，则会出现如下图的情况
旋转的角度是一致的，绘制的路径都是一样的，但是却没有重合
canvas 的 save和restore

如果将注释放开，则会重合
canvas 的 save和restore
另外：如果代码是这样的

var canvas = document.getElementById("canvas");  
var context = canvas.getContext('2d');  
 context.save();

 context.lineWidth = "10";  
 context.strokeStyle = "#fe9901";  
 context.translate(canvas.width / 2, canvas.height / 2);  
 context.rotate( 30 / 180 * Math.PI);  
 context.beginPath();  
 context.moveTo(0, 0);  
 context.lineTo(200, 200);  
 context.stroke();  
 
 context.restore();  

 context.rotate( 30 / 180 * Math.PI);  
 context.beginPath();  
 context.moveTo(0, 0);  
 context.lineTo(200, 200);  
 context.stroke();

那么绘制的图如下：
canvas 的 save和restore

相关标签： js canvas

上一篇： [email protected]@ 的使用

下一篇： monkey自动化测试移动app 操作指南——真机 安卓（Android）app测试

推荐阅读