zoukankan      html  css  js  c++  java
  • canvas_07 圆角

    <template>
        <view class="zcvs">
    
            <view class="zcvs-item">
                <view>07_圆角</view>
                <view>
                    <canvas class="zcvs-cvs" canvas-id="cvs" id="cvs" />
                </view>
            </view>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                };
            },
            onReady() {
                this.drawCvs();
            },
            methods: {
                drawCvs() {
                    const ctx = uni.createCanvasContext('cvs');
                    ctx.setLineWidth(5);
                    ctx.setStrokeStyle("#007AFF");
                    ctx.setFillStyle("#4CD964");
    
                    // 画 交叉线
                    ctx.beginPath();
                    ctx.moveTo(0, 150);
                    ctx.lineTo(300, 150);
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.moveTo(150, 0);
                    ctx.lineTo(150, 300);
                    ctx.stroke();
    
                    // 画 几个交叉点 及 连线
                    ctx.beginPath();
                    ctx.setStrokeStyle("#DD524D");
                    ctx.setLineWidth(2);
                    ctx.arc(150, 150, 5, 0, 2 * Math.PI); // 中心点
                    ctx.arc(100, 150, 5, 0, 2 * Math.PI); //
                    ctx.arc(150, 100, 5, 0, 2 * Math.PI); //
                    ctx.arc(200, 150, 5, 0, 2 * Math.PI); //
                    ctx.arc(150, 200, 5, 0, 2 * Math.PI); //
                    ctx.arc(100, 150, 5, 0, 2 * Math.PI); //
                    ctx.stroke();
    
                    // arcTo 的用法 控制点 就是两个线的交叉点
                    ctx.beginPath();
                    ctx.setLineWidth(5);
                    ctx.setStrokeStyle("#4CD964");
                    ctx.moveTo(100, 150);
                    ctx.arcTo(150, 150, 150, 100, 50);
                    ctx.arcTo(150, 150, 200, 150, 100);
                    ctx.arcTo(150, 150, 150, 200, 50);
                    ctx.arcTo(150, 150, 100, 150, 50);
                    ctx.stroke();
    
                    ctx.draw();
                },
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .zcvs {
    
            .zcvs-item {
                margin-bottom: 20px;
            }
    
            .zcvs-cvs {
                border: 1px solid #eee;
                height: 300px;
                 100%;
                box-sizing: border-box;
            }
        }
    </style>
  • 相关阅读:
    【FPGA】结构化层次化设计
    【FPGA】库、包和子程序 过程 函数
    【FPGA】8位奇偶校验 / 加(减)法器 VHDL程序
    【FPGA】顺序语句
    【FPGA】并行语句
    【FPGA】VHDL基础
    Luogu P3349 小星星
    Luogu P4284 概率充电器
    NOIP2018 | D2T2 & D2T3
    二项式反演 小记
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15251926.html
Copyright © 2011-2022 走看看