当前位置： 移动技术网 > IT编程>网页制作>Html5 > canvas图形变换

canvas图形变换

2020年03月12日  | 移动技术网IT编程  | 我要评论

侍从丹尼,2球迷看世界杯猝死,奥拉星杀神辅助

平移

translate(x,y) 注意平移的是坐标原点，而不是线条本身

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.translate(0,100);
        ctx.moveto(0,0);
        ctx.lineto(100,100);
        ctx.stroke();
    
    </script>
</body>
</html>

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.moveto(0,0);
        ctx.translate(0,100);
        ctx.lineto(100,100);
        ctx.stroke();
    
    </script>
</body>
</html>

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.moveto(0,0);        
        ctx.lineto(100,100);
        ctx.translate(0,100);
        ctx.stroke();
    
    </script>
</body>
</html>

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.moveto(0,0);        
        ctx.lineto(100,100);
        ctx.stroke();

        ctx.translate(0,100);
        ctx.beginpath();
        ctx.moveto(0,0);        
        ctx.lineto(100,100);
        
        ctx.stroke();
    
    </script>
</body>
</html>

 

 beginpath() 会清空之前的路径，但是不会清空被平移的坐标原点

 

旋转 rotate(reg)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.strokestyle='orange';
        ctx.linewidth=10;

        ctx.moveto(0,0);        
        ctx.lineto(100,100);        
        ctx.stroke();
    
        ctx.rotate(math.pi/4);
        ctx.beginpath();
        ctx.moveto(0,0);        
        ctx.lineto(100,100);        
        ctx.stroke();
    
    </script>
</body>
</html>

 

 同理，旋转的是坐标原点，而不是线条

 

缩放 scale(x,y)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.strokestyle='orange';
        ctx.linewidth=10;

        ctx.translate(300,200);
        ctx.moveto(0,0);        
        ctx.lineto(100,100);        
        ctx.stroke();
    
        ctx.rotate(math.pi/4);
        ctx.beginpath();
        ctx.moveto(0,0);        
        ctx.lineto(100,100);        
        ctx.stroke();

        ctx.scale(1,.5);
        ctx.fillrect(0,-100,100,100);
    
    </script>
</body>
</html>

 

 

ctx.save() 保存当前环境

ctx.restore() 复原上一次保存的环境（包括线条粗细和颜色设置也会受到影响）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        ctx.strokestyle="orange";
        ctx.save();//保存了最初还没变换的原点（描边颜色为橙色）

        ctx.linewidth=10;

        ctx.translate(300,200);
        ctx.moveto(0,0);        
        ctx.lineto(100,100);        
        ctx.stroke();
    
        ctx.rotate(math.pi/4);
        ctx.beginpath();
        ctx.moveto(0,0);        
        ctx.lineto(100,100);        
        ctx.stroke();

        ctx.scale(1,.5);
        ctx.fillrect(0,-100,100,100);

        ctx.restore();//坐标原点恢复到初始值

        ctx.moveto(500,300);        
        ctx.lineto(600,400);        
        ctx.stroke();


    
    </script>
</body>
</html>

 

 这两个建议成对出现

 

时钟表盘的原理演示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //画圆
        ctx.translate(300,200);
        ctx.arc(0,0,50,0,2*math.pi,true);
        ctx.stroke();

        //画刻度    
        for(var i=0;i<12;i++){
            ctx.rotate(math.pi/6);
            ctx.moveto(40,0);
            ctx.lineto(50,0);
        }        
        ctx.stroke();

    
    </script>
</body>
</html>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网