运行效果：

<!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. Wordpress 建站（一）

    去年在美国的justhost上买了两个域名(shanyexuanyu.com  和 chenjinyu.net.shanyexuanyu.com是给一位马来西亚的佛教徒朋友做的站点. 她镜头下佛教的文 ...

  2. Python爬虫开发【第1篇】【urllib2】

    1.urlopen # urllib2_urlopen.py # 导入urllib2 库 import urllib2 # 向指定的url发送请求,并返回服务器响应的类文件对象,urlopen中有da ...

  3. easyUI的treegrid添加节点（append）时间过长，设置等待（wait）遮罩效果

    如题所述,在treegrid中,一次添加多个节点时,时间很长,但easyUI并无显示等待信息,让人以为是陷入了死循环,或者死机了,用户体验很差. 本来,treegrid(或者datagrid)有所谓的 ...

  4. Windows 点击 模拟

    点击模拟  安卓模拟器  爬虫

  5. 20170623_oracle_优化与体系结构

    一般优化技巧 建议不用"*"代替所有列名 删除所有数据用TRUNCATE代替DELETE 用NOT EXISTS 代替NOT IN 用EXISTS代替IN 用EXISTS代替DIS ...

  6. javaSE基础（一）

    说明: 1)本系列专综合java SE 之基础概念!因为个人觉得,许多知识点的不理解来自于对各种名称与概念的定义的不理解. 2)其中的定义参考来自于Stuart Reges 和 Marty Stepp ...

  7. 【Beijing 2010】 次小生成树

    [题目链接] 点击打开链接 [算法] 首先,有一个结论 : 一定有一棵严格次小生成树是在最小生成树的基础上去掉一条边,再加上一条边 这个结论的正确性是显然的 我们先用kruskal算法求出最小生成树, ...

  8. Spring实战笔记

    晚上看了这本书的前面几章,记录一下自己看到的要点. 全书分为四大部分,Spring核心,web,后台相关,与其它框架集成.今天主要看了第一部分. Spring最根本的使命是简化Java开发,全方位的简 ...

  9. CF 1036 B Diagonal Walking v.2 —— 思路

    题目:http://codeforces.com/contest/1036/problem/B 题意:从 (0,0) 走到 (n,m),每一步可以向八个方向走一格,问恰好走 k 步能否到达,能到达则输 ...

  10. TI BLE: Advertisement

    #define GAPROLE_ADVERT_ENABLED 0x305 //!< Enable/Disable Advertising. Read/Write. Size is uint8. ...