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 ...
随机推荐
- Mariadb 事务
事务 事务具有ACID特性:原子性(A,atomicity).一致性(C,consistency).隔离性(I,isolation).持久性(D,durabulity). 1.原子性:事务内的所有操作 ...
- 【v2.x OGE-example 第三节 播放精灵动画】
1. 位置:Drawing_example --> SpriteAnimated 2. 类名:SpriteAnimated 3.利用AnimatedSprite动画精灵类能够实现多种多种动作. ...
- [Java] 监控java对象回收的原理与实现
监控Java对象回收的原理与实现 一．监控Java对象回收的目的 监控Java对象是否回收的目的是:为了实现内存泄露报警. 内存泄露是指程序中对象生命周期(点击查看详情)已经进入不可见阶段,但因为编码 ...
- easyUI的getChanges中的inserted
easyUI中的datagrid.treegrid编辑了数据,可以用getChanges命令来获取更新情况.按道理,有"inserted"."updated". ...
- python js
js = 'var a=document.getElementsByClassName("user-data-right")[0];a.target="_self&quo ...
- Nginx入门详解文档
1 文章内容 掌握nginx+tomcat反向代理的使用方法. 掌握nginx作为负载均衡器的使用方法. 掌握nginx实现web缓存方法. 2 nginx介绍 2.1 什么是nginx Nginx是 ...
- hdoj--1254--推箱子（bfs好题）
推箱子 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- ZOJ1081 Points Within 点和多边形的位置关系
ZOJ1081 给一个点和一个多边形 判断点在多边形内(边上)还是在多边形外 在多边形外的点引一条射线必然穿过多边形的两条边 而在多边形内的点则不一定. 当然凹多边形有特殊情况 但是总能找到对应位置关 ...
- 如何在linux 32位机器编译64位程序
编译64位程序,不一定要编译机器是64位的,但是32位机器默认安装的gcc编译环境还是不能用来编译64位程序. 编译64位程序,需要加上-m64编译器参数,默认安装的gcc已经支持该参数,但是缺少64 ...
- bzoj2060
树形dp dp[x][0]表示x点父亲没选,dp[x][1]表示x点父亲选了,然后dp[x][0]=max(sigma(dp[c[x]][0]),sigma(dp[c[x]][1])) dp[x][1 ...