zoukankan      html  css  js  c++  java
  • canvas_11 线性渐变

    <template>
        <view class="zcvs">
    
            <view class="zcvs-item">
                <view>Canvas_线性渐变</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');
                    ctx.setLineWidth(3);
                    ctx.setStrokeStyle("#007AFF");
                    ctx.setFillStyle("#DD524D");
    
                    let centX = 200;
                    let centY = 200;
                    let radius = 100;
    
                    let grd = ctx.createLinearGradient(100, 200, 300, 200);
                    grd.addColorStop(0, "#007AFF");
                    grd.addColorStop(0.5, "#4CD964");
                    grd.addColorStop(1, "#DD524D");
                    ctx.setFillStyle(grd);
                    ctx.beginPath();
                    ctx.arc(centX, centY, radius, 0, 1 * Math.PI, false);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.fill();
    
                    let grd1 = ctx.createLinearGradient(100, 50, 100, 100);
                    grd1.addColorStop(0, "#007AFF");
                    grd1.addColorStop(0.5, "#4CD964");
                    grd1.addColorStop(1, "#DD524D");
                    ctx.setFillStyle(grd1);
                    ctx.beginPath();
                    ctx.arc(centX / 2, centY / 2, radius / 2, 0, 2 * Math.PI, false);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.fill();
    
                    ctx.draw();
                },
            }
        }
    </script>
    
    <style lang="scss" scoped></style>
  • 相关阅读:
    3728 联合权值[NOIP 2014 Day1 T2]
    关于深度优先遍历图的非递归算法的一个讨论
    图的遍历递归和非递归实现【整理自网络】
    CSS 居中布局
    css怎样让背景充满整个屏幕
    关于html,body{height:100%}的解释
    4103:踩方格
    2287 火车站
    平面分割问题
    蜜蜂路线
  • 原文地址:https://www.cnblogs.com/luwei0915/p/15256117.html
Copyright © 2011-2022 走看看