zoukankan      html  css  js  c++  java
  • canvas_04 二次曲线

    <template>
        <view class="zcvs">
    
            <view class="zcvs-item">
                <view>03_二次曲线</view>
                <view>
                    <canvas class="zcvs-cvs" canvas-id="cvs" id="cvs" />
                </view>
            </view>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                };
            },
            onReady() {
                this.drawCvs();
            },
            methods: {
                // 03_二次曲线
                drawCvs() {
                    const ctx = uni.createCanvasContext('cvs');
                    ctx.setLineWidth(15);
                    ctx.setLineCap("round");
    
                    ctx.beginPath();
                    ctx.moveTo(50, 150);
                    ctx.quadraticCurveTo(175, 0, 300, 150);
                    ctx.setStrokeStyle("#007AFF");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.moveTo(50, 150);
                    ctx.quadraticCurveTo(175, -100, 300, 150);
                    ctx.setStrokeStyle("#4CD964");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.moveTo(50, 150);
                    ctx.quadraticCurveTo(175, 300, 300, 150);
                    ctx.setStrokeStyle("#DD524D");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.moveTo(50, 150);
                    ctx.quadraticCurveTo(15, -130, 300, 150);
                    ctx.setStrokeStyle("#F0AD4E");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.moveTo(50, 150);
                    ctx.quadraticCurveTo(335, -130, 300, 150);
                    ctx.setStrokeStyle("#F0AD4E");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.setLineWidth(5);
                    ctx.moveTo(135, 150);
                    ctx.quadraticCurveTo(145, 120, 155, 150);
                    ctx.setStrokeStyle("#F0AD4E");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.setLineWidth(5);
                    ctx.moveTo(195, 150);
                    ctx.quadraticCurveTo(205, 120, 215, 150);
                    ctx.setStrokeStyle("#F0AD4E");
                    ctx.stroke();
    
                    ctx.beginPath();
                    ctx.setLineWidth(5);
                    ctx.setLineCap("round");
                    ctx.moveTo(155, 180);
                    ctx.quadraticCurveTo(175, 220, 195, 180);
                    ctx.setStrokeStyle("#F0AD4E");
                    ctx.stroke();
    
                    ctx.draw();
                },
                drawCvsn() {
                    const ctx = uni.createCanvasContext('cvsn');
                },
            }
        }
    </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>
  • 相关阅读:
    小程序swiper组件实现间距轮播
    小程序form静态页面跳转
    批量添加Iconfont图标库图标
    Vant Weapp 有赞小程序UI库 ICON 组件的本地图标路径支持
    $rootScope、$apply、$watch
    EF code first 数据模型创建数据库
    angularjs directive2
    angularjs directive
    angularjs service
    angular repeat
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15250663.html
Copyright © 2011-2022 走看看