运行效果:

<!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. jQuery—— jQuery get方法+一般处理程序处理文本框内容

    网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...

  2. 魔兽 如何屏蔽F1键弹出帮助菜单

    如下图所示,我在任何时候按F1键,都会自动弹出Windows帮助和支持,事实上这个功能很鸡肋,从来没用过,但是玩魔兽的时候确实必须的,F1控制英雄的,呵呵.   方法还是有的,在任务管理器中找到这个应 ...

  3. Java 实现一个链表

    public class MyList { static class Node {// 节点类 Object data; Node next; public Node(Object data) {// ...

  4. 演练:我的第一个 WPF 桌面应用程序 https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/getting-started/walkthrough-my-first-wpf-desktop-application

    这篇文章演示如何开发简单的 Windows Presentation Foundation (WPF) 应用程序包括元素所共有的大多数 WPF 应用程序: 可扩展应用程序标记语言 (XAML) 标记. ...

  5. chrome.socket

    chrome.socket https://chajian.baidu.com/developer/apps/socket.html#method-create 描述: 使用 chrome.socke ...

  6. 约瑟夫环问题(Josephus)

    约瑟夫环:用户输入M,N值,从1至N开始顺序循环数数,每数到M输出该数值,直至最后一个元素并输出该元素的值. 一.循环链表:建立一个有N个元素的循环链表,然后从链表头开始遍历并记数,如果计数值为M,则 ...

  7. 在Unity中接入Xbox360手柄

    提要 本文主要介绍了怎样在Unity中接入Xbox360的手柄. 当我们调Input.GetAxis("Horizontal"),我们调了什么 Unity中全部关于输入的设置都在E ...

  8. 2016/1/1 运算符 笔记整理 接2015/12/30 Java 语法

    ④运算符 1,赋值运算符:实现从右向左的赋值,符号= 2,算术运算符:符号 + - * / %(求余或求模),结果自动转成最大的                      类型,自动升级. 3, 比较 ...

  9. 【HNOI模拟By lyp】Day2

    1 toad1.1 题目描述 有 n 个石子, A B 两人博弈, A 先手. A 首先取若干个石子(至少一个,不能取完),然后B和A 再轮流取石子,每次取的石子不能超过 axb ( x 表示上次取的 ...

  10. jboss相关的术语

    1 jboss eap java ee application server.red hat官方版本. 2 jboss as/wildfly java ee application server的社区 ...