scale()方法的副作用

最新推荐文章于 2024-05-23 23:52:59 发布

雅痞子军

最新推荐文章于 2024-05-23 23:52:59 发布

阅读量2.5k

点赞数 2

分类专栏： HTML5 JavaScript

本文链接：https://blog.csdn.net/qq_1724201421/article/details/80232983

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

在Canvas中，可以使用scale()方法来改变图形大小（即缩放）。不过scale()方法是有一定副作用的，它除了改变图形大小之外，还会改变其他属性如线条宽度（即lineWidth）、左上角坐标等。

看下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>scale()方法的副作用</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.οnlοad=function(){
            var cv=$('canvas');
            var cxt=cv.getContext('2d');

            cxt.lineWidth=4;
            cxt.strokeStyle='hotpink';
            cxt.strokeRect(30,30,50,50);

             //图形放大
            $('btn-big').οnclick=function(){
                cxt.scale(1.5,1.5);
                cxt.strokeRect(30,30,50,50);
            };
        };
    </script>
</head>
<body>
    <canvas id="canvas" width='500' height='500' style='border:1px solid grey;'></canvas><br />
    <input type="button" id="btn-big"  value='放大' />
</body>
</html>

多次点击“放大”按钮之后，在浏览器中的预览效果如下：