zoukankan      html  css  js  c++  java
  • canvas_24 变换状态栈

    <template>
        <view class="zcvs">
    
            <view class="zcvs-item">
                <view>变换状态栈</view>
                <view>
                    <canvas canvas-id="cvs" id="cvs" style=" 400px; height: 400px;border: 1px solid #007AFF;" />
                </view>
            </view>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                };
            },
            onReady() {
                this.drawCvs();
            },
            methods: {
                drawCvs() {
                    const ctx = uni.createCanvasContext('cvs');
                    const width = 150;
                    const height = 70;
    
                    ctx.save(); // 保存状态1
    
                    ctx.translate(200, 200);
                    ctx.save(); // 保存状态2
    
                    ctx.rotate(Math.PI / 4);
                    ctx.save(); // 保存状态3
    
                    ctx.scale(2, 2); // 状态4下 (移动 旋转 放大)
                    ctx.setFillStyle("blue");
                    ctx.fillRect(-width / 2, -height / 2, width, height);
    
                    ctx.restore(); // 状态3下 (移动 旋转)
                    ctx.setFillStyle("red");
                    ctx.fillRect(-width / 2, -height / 2, width, height);
    
                    ctx.restore(); // 状态2下, (移动)
                    ctx.setFillStyle("yellow");
                    ctx.fillRect(-width / 2, -height / 2, width, height);
    
                    ctx.restore(); // 状态1下
                    ctx.setFillStyle("green");
                    ctx.fillRect(-width / 2, -height / 2, width, height);
    
                    ctx.draw();
                },
            }
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
  • 相关阅读:
    Java——泛型、异常
    接口
    Classes
    Unit Tests
    Boundaries
    Error Handling
    Objects and Data Structures
    DB other operation
    Comments
    Functions
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15271612.html
Copyright © 2011-2022 走看看