菜单

选取canvas画chrome logo

2019年5月3日 - jQuery
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         #cs {
 11             border: 1px solid black;
 12             background: black;
 13         }
 14     </style>
 15 </head>
 16 
 17 <body>
 18     <canvas id="cs" width="500" height="500">
 19 
 20     </canvas>
 21 
 22     <script>
 23         let cs = document.getElementById('cs');
 24         let ctx = cs.getContext('2d');
 25         ctx.fillStyle = 'green';
 26         ctx.arc(200, 100, 50, 0, Math.PI, true);
 27         ctx.globalCompositeOperation = 'source-over';
 28         ctx.fill();
 29         //眼睛
 30         ctx.beginPath();
 31         ctx.arc(175, 80, 10, 0, Math.PI * 2, true);
 32         ctx.arc(222, 80, 10, 0, Math.PI * 2, true)
 33         ctx.fillStyle = 'black';
 34         ctx.fill();
 35         //耳朵
 36         ctx.beginPath();
 37         ctx.lineCap = "round";//设置返回线条
 38         ctx.lineWidth = 6;
 39         ctx.moveTo(160, 35);
 40         ctx.lineTo(175, 60);
 41         ctx.strokeStyle = "green";
 42         ctx.stroke();
 43 
 44         ctx.beginPath();
 45         ctx.lineCap = "round";//设置返回线条
 46         ctx.lineWidth = 6;
 47         ctx.moveTo(238, 35);
 48         ctx.lineTo(222, 60);
 49         ctx.strokeStyle = "green";
 50         ctx.stroke();
 51 
 52         //中间身体
 53         ctx.beginPath();    
 54         ctx.moveTo(150,110);
 55         ctx.lineTo(150,200);
 56         ctx.arcTo(150,210,160,210,10);
 57         ctx.lineTo(240,210);
 58         ctx.arcTo(250,210,250,200,10);
 59         ctx.lineTo(250,110);
 60         ctx.lineTo(150,110)
 61         ctx.strokeStyle = "green";
 62         ctx.fillStyle='green';
 63         ctx.fill();
 64         ctx.stroke();
 65         //两只手
 66         ctx.beginPath();
 67         ctx.lineCap = "round";//设置返回线条
 68         ctx.lineWidth = 20;
 69         ctx.moveTo(130, 115);
 70         ctx.lineTo(130, 160);
 71         ctx.strokeStyle = "green";
 72         ctx.stroke();
 73 
 74         ctx.beginPath();
 75         ctx.lineCap = "round";//设置返回线条
 76         ctx.lineWidth = 20;
 77         ctx.moveTo(270, 115);
 78         ctx.lineTo(270, 160);
 79         ctx.strokeStyle = "green";
 80         ctx.stroke();
 81 
 82         //两只脚
 83         ctx.beginPath();
 84         ctx.lineCap = "round";//设置返回线条
 85         ctx.lineWidth = 22;
 86         ctx.moveTo(180, 215);
 87         ctx.lineTo(180, 250);
 88         ctx.strokeStyle = "green";
 89         ctx.stroke();
 90 
 91         ctx.beginPath();
 92         ctx.lineCap = "round";//设置返回线条
 93         ctx.lineWidth = 22;
 94         ctx.moveTo(220, 215);
 95         ctx.lineTo(220, 250);
 96         ctx.strokeStyle = "green";
 97         ctx.stroke();
 98     </script>
 99 </body>
100 
101 </html>

上一篇写了多少个简易的lodingview,这篇详细的写下怎么样选用canvas 画chrome
logo,只供给4步。看图就掌握
代码下载

 

图片 1

chromelogo.png

图片 2

chromelogo1.png

差了一些到达了预测的功能。具体的步子如下
一先画多个120度的扇形

 private void drawSector(Canvas canvas)//将圆分成三个扇形
    {
        RectF rectF = new RectF(mPadding, mPadding,
                mWidth - mPadding, mWidth - mPadding);
        canvas.drawArc(rectF, -30, 120
                , true, mPaintYellow);
        canvas.drawArc(rectF, 90, 120
                , true, mPaintGreen);
        canvas.drawArc(rectF, 210, 120
                , true, mPaintRed);
    }

3回之步画两个等边三角形,正好是内切三角形和扇形交接处的影子效果

private void drawTriangle(Canvas canvas) {//画三个等边三角形组成的大三角形正好是内切三角形
        Point point1 = getPoint((mWidth / 2 - mPadding) / 2, 90);
        Point point2 = getPoint((mWidth / 2 - mPadding), 150);
        Point point3 = getPoint((mWidth / 2 - mPadding) / 2, 210);
        Point point4 = getPoint((mWidth / 2 - mPadding), 270);
        Point point5 = getPoint((mWidth / 2 - mPadding) / 2, 330);
        Point point6 = getPoint((mWidth / 2 - mPadding), 30);
        Path pathYellow = new Path();
        pathYellow.moveTo(mWidth / 2 - point1.x, mWidth / 2 - point1.y);
        pathYellow.lineTo(mWidth / 2 - point2.x, mWidth / 2 - point2.y);
        pathYellow.lineTo(mWidth / 2 - point3.x, mWidth / 2 - point3.y);
        pathYellow.close();
        Path pathGreen = new Path();
        pathGreen.moveTo(mWidth / 2 - point3.x, mWidth / 2 - point3.y);
        pathGreen.lineTo(mWidth / 2 - point4.x, mWidth / 2 - point4.y);
        pathGreen.lineTo(mWidth / 2 - point5.x, mWidth / 2 - point5.y);
        pathGreen.close();
        Path pathRed = new Path();
        pathRed.moveTo(mWidth / 2 - point5.x, mWidth / 2 - point5.y);
        pathRed.lineTo(mWidth / 2 - point6.x, mWidth / 2 - point6.y);
        pathRed.lineTo(mWidth / 2 - point1.x, mWidth / 2 - point1.y);
        pathRed.close();
        canvas.drawPath(pathGreen, mPaintGreen);
        canvas.drawPath(pathRed, mPaintRed);
        canvas.drawPath(pathYellow, mPaintYellow);

        //扇形交接处隐形效果
        for (int i = 0; i < Math.abs(mWidth / 2 - point2.y) / 2f; i++) {

            int fraction = 35 - i;
            if (fraction > 0) {
                lineColor = (Integer) evaluator.evaluate(fraction / 100f, startYellowColor, endColor);
                mPaintLine.setColor(lineColor);
            } else {
                mPaintLine.setColor(Color.argb(0, 0, 0, 0));
            }

            canvas.drawLine(mWidth / 2, point2.y + i,
                    mWidth / 2 - point2.x * 8f / 10f, mWidth / 2 - point2.y
                    , mPaintLine);

        }


        for (int i = 0; i < Math.abs(point3.x) / 2f; i++) {
            int fraction = 35 - i;
            if (fraction > 0) {
                lineColor = (Integer) evaluator.evaluate(fraction / 100f, startGreenColor, endColor);
                mPaintLine.setColor(lineColor);
            } else

                mPaintLine.setColor(Color.argb(0, 0, 0, 0));

            canvas.drawLine(mWidth / 2 - point3.x - i, mWidth / 2 - point3.y,
                    mWidth / 2 - point4.x, mWidth / 2 - point4.y
                    , mPaintLine);


        }


        for (int i = 0; i < Math.abs(mWidth / 2 - point5.x) / 2f; i++) {
            int fraction = 30 - i;
            if (fraction > 0) {
                lineColor = (Integer) evaluator.evaluate(fraction / 100f, startRedColor, endColor);
                mPaintLine.setColor(lineColor);
            } else

                mPaintLine.setColor(Color.argb(0, 0, 0, 0));
            canvas.drawLine(mWidth / 2 - point5.x + i, mWidth / 2 - point5.y,
                    mWidth / 2 - point6.x, mWidth / 2 - point6.y
                    , mPaintLine);

        }

    }

三末段画基本的圆,logo就出现了

  private void drawCircle(Canvas canvas) {//画中心的圆覆盖
        canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth / 2 - mPadding) / 2, mPaintWhite);
        canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth / 2 - mPadding) / 2 / 6 * 5, mPaintBulue);
    }

利用三角函数总括圆周上的点

    private Point getPoint(float radius, float angle) {
        float x = (float) ((radius) * Math.cos(angle * Math.PI / 180f));
        float y = (float) ((radius) * Math.sin(angle * Math.PI / 180f));
        Point p = new Point(x, y);
        return p;
    }

代码下载

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图