canvas一周一练 -- canvas绘制中国银行标志（4）

最新推荐文章于 2024-07-12 16:27:40 发布

anlangpan0314

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/merryZhang/p/7154447.html

版权

运行效果：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="drawing" width="600" height="400">A drawing of someing!</canvas>
    <script type="text/javascript">
        //绘制中国银行标志
        var drawBoc = function(){
            var drawing = document.getElementById('drawing');
            if(drawing.getContext) {
                var context = drawing.getContext('2d');
                //画外环
                context.fillStyle = '#f00';
                context.strokeStyle = '#f00';
                context.beginPath();
                context.arc(200, 200, 100, 0, 2*Math.PI, false);
                context.closePath();
                context.stroke();
                context.fill();
                context.save();

                context.fillStyle = '#fff';
                context.beginPath();
                context.arc(200, 200, 77, 0, 2*Math.PI, false);
                context.closePath();
                context.stroke();
                context.fill();

                //画外面的口（圆角矩形）
                context.restore();
                roundRec(context, 150, 160, 100, 80, 25, true, false);
                //画里面的口
                context.fillStyle = '#fff';
                context.fillRect(170, 180, 60, 40);
                //画上下两竖
                context.fillStyle = '#f00';
                context.fillRect(190, 123, 20, 37);
                context.fillRect(190, 240, 20, 37);

            }
        };
        //画圆角矩形
        var roundRec = function(context, x, y, width, height, radius, fill, stroke){
            if(typeof stroke == 'undefined') {
                stroke = true;
            }
            if(typeof radius == 'undefined') {
                radius = 5;
            }
            context.beginPath();
            context.moveTo(x+radius, y);
            context.lineTo(x+width-radius, y);
            context.quadraticCurveTo(x+width, y, x+width, y+radius);
            context.lineTo(x+width, y+height-radius);
            context.quadraticCurveTo(x+width, y+height, x+width-radius, y+height);
            context.lineTo(x+radius, y+height);
            context.quadraticCurveTo(x, y+height, x, y+height-radius);
            context.lineTo(x, y+radius);
            context.quadraticCurveTo(x, y, x+radius, y);
            context.closePath();
            if(stroke) {
                context.stroke();
            }
            if(fill) {
                context.fill();
            }
        };

        drawBoc();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/merryZhang/p/7154447.html

anlangpan0314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas一周一练 -- canvas绘制中国银行标志（4）

运行效果：<!DOCTYPE html><html><head></head><body> <canvas id="drawing" width="600" height="400">A drawing of someing!</canvas> <sc...
复制链接

扫一扫