Macro Da

每天学一点,成长多一点!

初学canvas画一个可任意修改大小的中国银行LOGO

刚开始学习canvas,先照着W3C教程练习了一遍,产生想做个练习的想法,以前刚学PS时画一个中国银行LOGO,于是就基于目前所学,用canvas画了个简单的LOGO,可以直接调整canvas大小。

《初学canvas画一个可任意修改大小的中国银行LOGO》

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
    <canvas id="icbc" width="500" height="500" style="display: block; margin: 30px auto 0;"></canvas>
    <script>
        var icbc = document.getElementById("icbc");
        var ibx = icbc.getContext("2d");
        var r = icbc.width / 2;  //半径大小
        var b = r * 0.2;         //边框大小

        //画一个圆
        ibx.beginPath();
        ibx.strokeStyle = "#a71e32";
        ibx.lineWidth = b;
        ibx.arc(r, r, r - b / 2, 0,2*Math.PI);
        ibx.stroke();

        //画中间矩形
        drawRoundRect(ibx, r * 0.6, r * 0.68, r * 0.8, r * 0.64, b / 2);
        ibx.stroke();

        //画第一根竖线
        ibx.beginPath();
        ibx.moveTo(r, b);
        ibx.lineTo(r, r * 0.68 - b / 2);
        ibx.stroke();

        //画第二根竖线
        ibx.beginPath();
        ibx.moveTo(r, r * 1.42);
        ibx.lineTo(r, r * 2 - b / 2);
        ibx.stroke();

        //圆角矩形函数
        function drawRoundRect(cxt, x, y, width, height, radius){   
            cxt.beginPath();   
            cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
            cxt.lineTo(width - radius + x, y);   
            cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
            cxt.lineTo(width + x, height + y - radius);   
            cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
            cxt.lineTo(radius + x, height +y);   
            cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
            cxt.closePath();   
        }   

    </script>
</body>
</html>

 

点赞

发表回复

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