运行效果：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <canvas id="drawing" width="" height="">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(, , , , *Math.PI, false);

                context.closePath();

                context.stroke();

                context.fill();

                context.save();

                context.fillStyle = '#fff';

                context.beginPath();

                context.arc(, , , , *Math.PI, false);

                context.closePath();

                context.stroke();

                context.fill();

                //画外面的口（圆角矩形）

                context.restore();

                roundRec(context, , , , , , true, false);

                //画里面的口

                context.fillStyle = '#fff';

                context.fillRect(, , , );

                //画上下两竖

                context.fillStyle = '#f00';

                context.fillRect(, , , );

                context.fillRect(, , , );

            }

        };

        //画圆角矩形

        var roundRec = function(context, x, y, width, height, radius, fill, stroke){

            if(typeof stroke == 'undefined') {

                stroke = true;

            }

            if(typeof radius == 'undefined') {

                radius = ;

            }

            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>

canvas一周一练 -- canvas绘制中国银行标志（4）的更多相关文章

  1. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. canvas一周一练 -- canvas绘制太极图（6）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  3. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. canvas一周一练 -- canvas绘制立体文字（2）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  5. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. canvas学习总结三：绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  8. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  9. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

随机推荐

  1. hdu 3006 The Number of set(思维+壮压DP)

    The Number of set Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. [转] Ubuntu/Linux Mint/Debian 安装 Java 8

    本PPA由webupd8制作,支持Ubuntu .04以及对应的Linux Mint版本,Oracle Java 8包提供JDK8 和 JRE8. sudo add-apt-repository pp ...

  3. JPA測试实例

    依赖架包 实体 import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.G ...

  4. 【Codevs1183】泥泞的道路

    Position: http://codevs.cn/problem/1183/ List Codevs1183 泥泞的道路 List Description Input Output Sample ...

  5. 【POJ 1679】 The Unique MST

    [题目链接] 点击打开链接 [算法] 先求出图的最小生成树 枚举不在最小生成树上的边,若加入这条边,则形成了一个环,如果在环上且在最小生成树上的权值最大的边等于 这条边的权值,那么,显然最小生成树不唯 ...

  6. JSP：目录

    ylbtech-JSP:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...

  7. wrap(),wrapAll(),wrapInner()的区别

    wrap从字面上理解就是包裹的意思,这三个函数也都是起到将内部节点进行包裹的作用,但是他们的各自的功能有又大不相同. 1.  a.wrap(b) 这个函数的作用是用b将a进行包裹,其中a所选中的可以为 ...

  8. Unity ScriptObject

    http://godstamps.blogspot.com/2012/02/unity-3d-scriptableobject-assetbundle.html http://ivanozanchet ...

  9. bzoj Strange Way to Express Integers【excrt】

    其实我没看懂题不如说根本没看--都说是excrt板子那就写个板子吧 注意开long long #include<iostream> #include<cstdio> using ...

  10. composer查看安装情况

    composer install --no-progress --profile -vvv