zoukankan      html  css  js  c++  java
  • canvas_03 画弧线

    <template>
        <view class="zcvs">
    
            <view class="zcvs-item">
                <view>02_画弧线</view>
                <view>
                    <canvas class="zcvs-cvs" canvas-id="cvs2" id="cvs2" />
                </view>
            </view>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                };
            },
            onReady() {
                this.drawCvs2();
            },
            methods: {
                // 02_画弧线
                drawCvs2() {
                    const ctx = uni.createCanvasContext('cvs2');
                    ctx.beginPath();
                    let angle = 0
                    let timer = setInterval(() => {
                        ctx.setLineWidth(20);
                        ctx.setStrokeStyle('#007AFF');
                        ctx.setFillStyle("#4CD964")
                        ctx.arc(100, 100, 50, angle * Math.PI, (angle + 0.5) * Math.PI, false);
                        ctx.fill();
                        ctx.stroke();
                        ctx.draw();
                        angle += 0.5;
                    }, 200)
                    setTimeout(() => {
                        clearInterval(timer);
                    }, 10000)
                },
                drawCvsn() {
                    const ctx = uni.createCanvasContext('cvsn');
                    ctx.setLineWidth(30);
                },
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .zcvs {
            .zcvs-item {
                border: 1upx solid #eee;
                margin-bottom: 40upx;
            }
    
            .zcvs-cvs {
                border: 1px solid #007AFF;
                height: 500upx;
                 100%;
                box-sizing: border-box;
            }
        }
    </style>
  • 相关阅读:
    POJ 2976 Dropping tests
    【学习笔记-中国剩余定理】POJ1006 Biorhythms
    2017.10.6北京清北综合强化班DAY6
    P1607 [USACO09FEB]庙会班车Fair Shuttle
    2017.10.5北京清北综合强化班DAY5
    洛谷 P1379 八数码难题
    A. 拼音魔法
    A
    K
    A
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15250636.html
Copyright © 2011-2022 走看看