运行效果：

<!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. POJ 3370 Halloween treats（抽屉原理）

    Halloween treats Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6631   Accepted: 2448 ...

  2. UVa 10950 - Bad Code

    题目:有一种编码方式.串仅仅有小写字母构成,每一个小写字母相应一个数字,如今给你妆化后的数字串, 问有多少个原串与之相应,注意数字串里可能有一个前导0. 分析:搜索.按字母顺序存储映射表,按字母顺序匹 ...

  3. C++入门学习——模板

    为什么须要模板? 我们已经学过重载(Overloading),对重载函数而言,C++ 通过函数參数(參数个数.參数类型)的正确匹配来调用重载函数.比如.为求两个数的最大值,我们定义 max () 函数 ...

  4. css ios H5页面web页面 上下滑动卡顿问题解决方案

    原因1: html,body{ height: 100%; } 删除上述代码即可. 其他原因: *{ -webkit-overflow-scrolling: touch; } 增加上述代码.

  5. vue iview Select bug，在低版本浏览器中报错

    iview是个好东西,今天第一次试用,用来做了一个app,但是在安卓5.1各种报错啊,头痛的是不知道具体哪行代码错了,总是报错undefined is not a function. 倒腾了半天,原来 ...

  6. H264--2--语法及结构[5]

    名词解释 场和帧 :    视频的一场或一帧可用来产生一个编码图像.在电视中,为减少大面积闪烁现象,把一帧分成两个隔行的场. 片:             每个图象中,若干宏块被排列成片的形式.片分为 ...

  7. python 获取当前文件夹路径及父级目录的几种方法

    获取当前文件夹路径及父级目录: import os current_dir = os.path.abspath(os.path.dirname(__file__)) print(current_dir ...

  8. bzoj4619

    4619: [Wf2016]Swap Space Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 129  Solved: 54[Submit][Sta ...

  9. 转贴：CSS伪类与CSS伪元素的区别及由来具体说明

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  10. PCB 帆软FineReport安装,布署,配置

    公司使用帆软FineReport做为报表平台工具也有一年多时间,而FineReport报表平台与Tomcat Web应用服务是站队在java阵营里,因为相信拥抱微软;.net未来发展会越来越好,所以对 ...