[Canvas绘图] 第08节 "8"解九妹

最新推荐文章于 2021-08-23 22:46:37 发布
最新推荐文章于 2021-08-23 22:46:37 发布
阅读量429 收藏
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwsister/article/details/50131441
版权
本节目标：
(1) 绘制数字

实现步骤：

电子数字中笔画最多的是"8"字，把它绘制出来后，其它九个数字可以通过减笔画快速生成，包装一个Digit类.

/**
* @usage   数字形状
* @author  mw
* @date    2015年12月01日  星期二  15:57:45 
* @param
* @return
*
*/
	function Digit() {
		var shape = new Shape();
		
		//8
		this.eight = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
		
		this.one = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			
			//填充
			//shape.fillRect(x, y, h, w0); //中横
			//shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			//shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			//shape.fillRect(x, y-h, h, w0); //上横
			//shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
	
		this.two = function(x, y, r) {
			plot.save();
			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			//shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			shape.fillRect(x-w, y+w, w0, h); //下左竖
			//shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
	
		this.three = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			//shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			//shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
	
		this.four = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			//shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			//shape.fillRect(x, y-h, h, w0); //上横
			//shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
		
		this.five = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			shape.fillRect(x-w, y-w, w0, h); //上左竖
			//shape.fillRect(x+w, y-w, w0, h); //上右竖
			//shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
		
		this.six = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			shape.fillRect(x-w, y-w, w0, h); //上左竖
			//shape.fillRect(x+w, y-w, w0, h); //上右竖
			shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
		
		this.seven = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			//shape.fillRect(x, y, h, w0); //中横
			//shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			//shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			//shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
		
		this.nine = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			shape.fillRect(x, y, h, w0); //中横
			shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			//shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}
		
		this.zero = function(x, y, r) {
			plot.save();

			
			var h = r * 0.45; //字半高
			var w = h / 2.2; //字半宽
			var w0 = r *0.1; //填充宽
			
			/*
			shape.strokeRect(x, y, h, w0); //中横
			shape.strokeRect(x-w, y-w, w0, h); //上左竖
			shape.strokeRect(x+w, y-w, w0, h); //上右竖
			shape.strokeRect(x-w, y+w, w0, h); //下左竖
			shape.strokeRect(x+w, y+w, w0, h); //下右竖
			shape.strokeRect(x, y-h, h, w0); //上横
			shape.strokeRect(x, y+h, h, w0); //下横
			*/
			//填充
			//shape.fillRect(x, y, h, w0); //中横
			shape.fillRect(x-w, y-w, w0, h); //上左竖
			shape.fillRect(x+w, y-w, w0, h); //上右竖
			shape.fillRect(x-w, y+w, w0, h); //下左竖
			shape.fillRect(x+w, y+w, w0, h); //下右竖
			shape.fillRect(x, y-h, h, w0); //上横
			shape.fillRect(x, y+h, h, w0); //下横
			
			plot.restore();
		
		}	
	}
这样就可以调用： 

		var digit = new Digit();
		digit.eight(50,20,90);
		digit.one(100, 20, 90);
		digit.two(150, 20, 90);
		digit.three(220, 20, 90);
		digit.four(270, 20, 90);
		digit.five(320, 20, 90);
		digit.six(370, 20, 90);
		digit.seven(420, 20, 90);
		digit.nine(470, 20, 90);
		digit.zero(520, 20, 90);
得到结果：

但是这样不适合用作循环，所以我又加了一个封装函数：

/**
* @usage   绘制数字
* @author  mw
* @date    2015年12月01日  星期二  16:50:23 
* @param  n [0-9] 要绘制的数字 x, y, 中心点 r 外接圆尺寸
* @return
*
*/
		this.number = function(n, x, y, r) {
			switch (n) {
				case 0: this.zero(x, y, r); break;
				case 1: this.one(x, y, r); break;
				case 2: this.two(x,y,r); break;
				case 3: this.three(x, y, r); break;
				case 4: this.four(x,y,r);break;
				case 5: this.five(x,y,r);break;
				case 6: this.six(x,y,r); break;
				case 7: this.seven(x,y,r); break;
				case 8: this.eight(x,y,r); break;
				case 9: this.nine(x,y,r); break;
				default:break;
			
			}
		}

可以这样调用：

		var r = 50;
		
		for (var i = 0; i < 10; i++) {
			digit.number(i, i * 50, 50, 50);
		}
结果图：

这节就到这里。

mwsister
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE8 canvas绘图效果
04-04
解决IE8下绘图功能，兼容HTML5标签
小程序 module "ec-canvas/ec-canvas.js" is not defined
weixin_42248476的博客
01-06 3841
非常感动的报错。 我的问题是在加载的时候就出现这个问题。找了半天也不知道错哪了。 最后解决方案 project.config.json 的 setting 的 es6 一定要是true 。默认也是true，当然你把他改了，基本就是这个问题。 ...
2021-08-23
weixin_40444086的博客
08-23 154
2015年最新Android基础入门教程目录(完结版) 标签（空格分隔）： Android基础入门教程 前言： 关于《2015年最新Android基础入门教程目录》终于在今天落下了帷幕，全套教程 共148节已编写完毕，附上目录，关于教程的由来，笔者的情况和自学心得，...
2015年最新Android基础入门教程目录(完结版)
热门推荐
Coder-Pig的猪栏
11-23 25万+
2015年最新Android基础入门教程目录(完结版) 前言： 关于《2015年最新Android基础入门教程目录》终于在今天落下了帷幕，全套教程 共148节已编写完毕，附上目录，关于教程的由来，笔者的情况和自学心得，资源分享 以及一些疑问等可戳： 下面是本系列教程的完整目录：
java adt入门教程_Android基础入门教程目录
weixin_42511712的博客
02-28 423
第一章：环境搭建与开发相关(已完结 10/10)https://blog.csdn.net/coder_pig/article/details/50000773Android基础入门教程——1.1 背景相关与系统架构分析Android基础入门教程——1.2 开发环境搭建Android基础入门教程——1.2.1 使用Eclipse + ADT + SDK开发Android APPAndroid基础入...
Canvas情人节爱心气球告白特效特效代码
03-20
Canvas情人节爱心气球告白特效是一款爱心气球挂着文字缓缓上升，情人节气球告白背景动画特效。
情人节爱心散射Canvas特效
07-24
情人节爱心散射Canvas特效是一款基于HTML5 Canvas绘制的情人节爱心主题动画特效。
html5 canvas圣诞节网页下雪背景特效
11-06
html5 canvas圣诞节网页下雪背景特效 html5 canvas圣诞节网页下雪背景特效
canvas--IE8.zip
06-01
IE8支持HTML5及canvas功能！
[Canvas绘图] 第27节 三维初探
微笑的彩虹的博客
12-17 3142
本节目标： (1)  绘制椭圆 (2)  绘制简单三维图形 实现步骤： 采用贝氏曲线绘制椭圆 //绘制椭圆 function BezierEllipse1(x, y, a, b, rotate) { //关键是bezierCurveTo中两个控制点的设置 //0.5和0.6是两个关键系数（在本函数中为试验而得） var ox = 0.5 * a, oy
[Canvas绘图] 第26节 生成表格
微笑的彩虹的博客
12-13 2140
本节目标： (1) 绘制一张Python标准库模块索引表 实现步骤： (1) 我有下面这样一堆字符串，我想把它们放到表格中 "__future__", "__main__", "_dummy_thread", "_thread", "abc", "aifc", "argparse", "array", "ast", "asynchat", "asyncore", "atexit",
[Canvas绘图] 第01节 画布准备
微笑的彩虹的博客
11-27 1221
本节目标： (1) 封装Canvas API (2) 画布分区 (3) 简单图形绘制 实现步骤： (1) 封装Canvas API //全局变量 var plot = function() { //此处封装Canvas API }(); //初始化环境 function setPreference() { plot.init() //颜
[Canvas绘图] 第30节 沙场点兵
微笑的彩虹的博客
01-07 961
本节目标： (1) 整理这一个月以来产生的代码 (2) 修改bug, 把函数封装成类 实现步骤： (1)  Map类的修改与功能测试 //Map类的put(), print()功能测试 function myDraw() { var map = new Map(); for (var i = -10; i < 10; i++) { map.put(i, i * i);
[Canvas绘图] 第28节 分块治图
微笑的彩虹的博客
12-20 776
本节目标： (1) 我忽然间想到一个分区域读图取轮廓的方法，想了一夜，觉得要实现看看效果怎样。 实现步骤： （1）首先确定了中心思想，对于一张图的轮廓，必然是像素变化比较剧烈的点，这个先前已经有了 简易的判定。但是以疥是按行列扫描判定，这次我决定按区块扫描判定。按区块的目的是因为如果区块 够小，可以把它当作一个单元来处理，于是我定义了这样一个结构： /** * @usage
[Canvas绘图] 第06节 车轮滚滚
微笑的彩虹的博客
11-30 756
本节目标： (1) 查看各种参数下的图形效果 实现步骤： 续前节，这一次我让上一节的火柴棍子变成矩形，沿用上一节的代码，看看能得出哪些不一样的图形。 上面这张图在上一节对应的那张标注出了错，两个平移都是r/2,上一节错写成了-r/2。 最后这两张图初看起来是一样的，但注意圆心处的孔洞，可以看出区别，到这里，就很像精美的车轮了。 从
[Canvas绘图] 第04节 多边家族
微笑的彩虹的博客
11-29 660
本节目标： (1) 查看各种参数下的图形效果 实现步骤： 续前节，本节我想看看各种多边形怎样画，于是代码写成 var row = 3; var col = 3; for (var m = 1; m <= row; m++) { for (var n = 1; n <= col; n++) { setSector(row,col,m,n);
[Canvas绘图] 第10节 图片加载
微笑的彩虹的博客
12-03 542
本节目标： (1) 用Canvas加载并显示图片 实现步骤： 效果如图: 代码如下： /** * @usage 图片加载处理例 * @author mw * @date 2015年12月03日 星期四 07:50:42 * @param * @return * */ function myplot() { plot.init(); setPrefe
[Canvas绘图] 第05节 火柴天堂
微笑的彩虹的博客
11-30 493
本节目标： (1) 查看各种参数下的图形效果 实现步骤： 续前节，我想研究一下这段代码能给我生成出多少图案。 /** * @usage 星形系列图形 * @author mw * @date 2015年11月30日 星期一 13:12:53 * @param * @return * */ function myplot() { plot.init();
canvas绘图
最新发布
05-26
Canvas 绘图是一种用于在网页上创建动态、交互式图形的技术。Canvas 绘图基于 HTML5 标准，可以使用 JavaScript 在网页上创建动画、游戏、图表等各种可视化效果。 Canvas 绘图有两个重要的对象：canvas 和 context...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值