运行效果：

<!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. vi，vim的基本使用方法

    "i”插入 "/" 查找 "wq"保存退出 "q!"不保存退出

  2. Java循环中删除一个列表元素

    本文主要想讲述一下我对之前看到一篇文章的说法.假设跟你的想法有出入,欢迎留言.一起讨论. #3. 在循环中删除一个列表元素 考虑以下的代码.迭代过程中删除元素: ArrayList<String ...

  3. 关于ping以及TTL的分析

    首先介绍一下ping这个工具 ping [目标] 的意思就是向目标发送几个数据包,之后假设目标接受到一个数据包.那么目标就会向发送ping的主机返回一个数据包 比方上图.我ping了百度的server ...

  4. Android 4.2 project导入 5.0 SDK Eclipse 开发环境出现的问题总结

    Android 4.2 project导入 5.0 SDK Eclipse 开发环境出现的问题总结 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循&qu ...

  5. ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础，单线程，跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js：使用 JavaScript 生成

    ASP.NET Boilerplate 学习   1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...

  6. 【剑指Offer学习】【面试题31：连续子数组的最大和】

    题目:输入一个整型数组,数组里有正数也有负数.数组中一个或连续的多个整数组成一个子数组.求全部子数组的和的最大值.要求时间复杂度为O(n). 样例说明: 比如输入的数组为{1, -2, 3, 10, ...

  7. mciSendString详解（转）

    做个mp3播放器,用realplay和WMP做出来的程序内存占用太大.如果你仅仅是播放MP3,建议使用API函数mciSendString,我把该函数的详细资料罗列如下供你参考.Option Expl ...

  8. HNOI模拟 Day3.23

    一.拓扑(top)[ 题目描述]:给你一个有向二分图,求他的拓扑序列的个数.[ 输入]:第一行两个数 N,M,表示点数和边数.接下来 M 行每行两个数 a,b,表示 a 向 b 有一条有向边.[ 输出 ...

  9. 局部优化与整体效果 新增时间>节省时间 权衡利弊

    原代码 from selenium import webdriverimport requests,timeurl_l=[]with open('DISTINCT_url.txt', 'r', enc ...

  10. 对于系统盘升级windows10怕空间不够，还是打算继续卸载一些软件

    本来是打算从其他盘压缩,然后扩展,可是怕把磁盘给弄坏了,然后就保存原来的,就是看升级的推送什么时候来了.