canvas一周一练 -- canvas绘制中国银行标志(4)
运行效果:
<!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)的更多相关文章
- canvas一周一练 -- canvas绘制饼图(3)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制太极图(6)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制马尾图案 (5)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制立体文字(2)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制奥运五环(1)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- canvas学习总结三:绘制路径-线段
Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- canvas学习总结六:绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...
随机推荐
- 网页页面NULL值对浏览器兼容性的影响
网页页面NULL值对浏览器兼容性的影响 近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...
- php 获取今天,本周,本月,三个月内,半年内,今年的开始和结束时间
$now = time(); //今天 $today_audit_num = 0; $today_use_num = 0; $beginTim ...
- Go语言核心之美 3.2-slice切片
Slice(切片)是长度可变的元素序列(与之相应,上一节中的数组是不可变的),每一个元素都有同样的类型.slice类型写作[]T.T是元素类型.slice和数组写法非常像,差别在于slice没有指定长 ...
- CF:Problem 427C - Checkposts强连通 Tarjan算法
tarjan算法第一题 喷我一脸. ...把手写栈的类型开成了BOOL.一直在找错.. . #include<cstdio> #include<cstring> #includ ...
- (二)Java 简介
Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式 ...
- C语言8大经典排序算法(1)
算法一直是编程的基础,而排序算法是学习算法的开始,排序也是数据处理的重要内容.所谓排序是指将一个无序列整理成按非递减顺序排列的有序序列.排列的方法有很多,根据待排序序列的规模以及对数据的处理的要求,可 ...
- iOS:界面适配(二)--iPhone/iPad适配(关于xib)
本文纯属个人看法,强迫症后遗症 版本:xcode 6.0 + iOS SDK 8.0 讨论范围:控制器的view(创建VC时自带的xib) ------------------------------ ...
- 洛谷P2827 蚯蚓——思路题
题目:https://www.luogu.org/problemnew/show/P2827 思路... 用优先队列模拟做的话,时间主要消耗在每次的排序上: 能不能不要每次排序呢? 关注先后被砍的两条 ...
- 洛谷P2831 愤怒的小鸟——贪心?状压DP
题目:https://www.luogu.org/problemnew/show/P2831 一开始想 n^3 贪心来着: 先按 x 排个序,那么第一个不就一定要打了么? 在枚举后面某一个,和它形成一 ...
- vue 目录结构介绍
1 初始目录如下: 2 目录结构介绍 bulid:最终帆布的代码存放位置 config:配置目录,包括端口号等 node_modules:npm加载的项目依赖模块 src:z这里是我们要开发的目录,基 ...