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>
  • 相关阅读:
    java程序员裸机配置
    安装库
    自定义脚本模板
    Oracle数据库触发器简单案例
    Oracle数据库按正则切割字符串
    Oracle查询一张表的所有字段
    Oracle数据库系统表
    Oracle设置最大连接数
    Oracle博客参考教程
    区间dp [H
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15250663.html
Copyright © 2011-2022 走看看