运行效果：

<!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. android账号与同步之账号管理

    在android提供的sdk中,samples文件夹下有一个叫SampleSyncAdapter的演示样例,它是一个账号与同步的实例,比方Google原始的android手机能够使用Google账号进 ...

  2. java实现floyd统计天津地铁的网站距离

    一:说明 (1)使用floyd实现各个网站的计算记录和路径 (2)网站获取和初始距离依据外部文件得到 (3)结果以外部文件的形式存储 (4)网站间转乘,觉得初始值也为1 (5)代码凝视比較具体,如有疑 ...

  3. Silverlight+WCF实现跨域调用

    在这篇文章中.WCF扮演server,向外提供LoginVaild服务.Silverlight扮演client.调用WCF提供的LoginVaild服务.思路有了.以下进行代码实现. 数据库脚本实现 ...

  4. 微软2016校园招聘在线笔试 [Recruitment]

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 A company plans to recruit some new employees. There are N ca ...

  5. jquery uploadify在谷歌浏和火狐下无法上传的解决方案(.Net版)

    在项目紧张的进行过程中,jquery uploadify上传不兼容的问题一直没有试着去解决,只幻想着用ie的人越来越多,怎么奈何firefox4刚推出,就有4000万的下载.......仰天长叹,记生 ...

  6. 怎么样关掉红米note开发者选项

    进 系统设置\应用 ,找到“设置”点进去,清一下数据,再打开“设置”查看,就没有“开发者选项”了

  7. 蓝书2.4 AC自动机

    T1 玄武密码 bzoj 4327 题目大意: 一些字符串 求这些字符串的前缀在母串上的最大匹配长度是多少 思路: 对于所有串建立AC自动机 拿母串在自动机上匹配 对所有点打标记 以及对他们的fail ...

  8. 洛谷 P1084 疫情控制 —— 二分+码力

    题目:https://www.luogu.org/problemnew/show/P1084 5个月前曾经写过一次,某个上学日的深夜,精疲力竭后只有区区10分,从此没管... #include< ...

  9. bzoj2558

    哈希+拓扑排序 题意比较绕,先开始没看懂就看了发程序,发现好像理解的不太一样,后来找到了一个题目解释... 摘自jcvb:其实就是说颜色相同且三个出口分别对应相同(注意有可能是合并后才相同)两个结点是 ...

  10. div标签的闭合检查

    什么叫DIV标签有没有闭合呢?有<div>开头就应该有</div>来结尾闭合了.有时候写代码写 了<div>,忘记</div>结尾,谓之没有闭合也. 如 ...