1. <!DOCTYPE html>
  2. <html>
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title>函数图像绘制工具</title>
  7. 		<script type="text/javascript" src="js/funcImg.js"></script>
  8. 		<style>
  9. 			#div-img {
  10. 				/* 此决定画布的宽高 */
  11. 				width: 500px;
  12. 				height: 500px;
  13. 			}
  15. 			#input-controller {
  16. 				padding: 10px;
  17. 				background-color: azure;
  18. 			}
  19. 		</style>
  20. 	</head>
  22. 	<body>
  23. 		<div id="input-controller">
  24. 			<div id="function">
  25. 				<button onclick="Add()">添加函数</button>
  26. 				<span id="mod" style="display:none" name="0">
  27. 					<input type="color"/>y=
  28. 					<input type="text" value="x^3" name="Fun"/>
  29. 					<button onclick="Delete(this.parentNode)">Delete</button>
  30. 	                <input type="checkbox" onclick="reDraw()" checked="checked"/>Draw Line
  31. 				</span>
  32. 			</div>
  34. 			<div id="option">
  35. 				X：<input id="xLeftValue" /> ~
  36. 				<input id="xRightValue" />
  37. 				<br> Y：
  38. 				<input id="yLeftValue" /> ~
  39. 				<input id="yRightValue" />
  40. 				<br>
  42. 				<span id="show-size">Size:</span>
  43. 			</div>
  44. 			<button onclick="change()">画图</button>
  45. 		</div>
  46. 		<div id="main">
  48. 			<h1>函数图像绘制工具</h1>
  49. 			<div id="div-img">
  50. 				<canvas id="graph"></canvas>
  51. 			</div>
  52. 		</div>
  54. 	</body>
  55. 	<script>
  56. 		const FONT_STYLE = "10px 黑体";
  57. 		const MIN = 1e-4;
  58. 		const MAX = 1e8;
  59. 		const EPS = 1e-12;
  60. 		const CANVAS = $("graph");
  61. 		const CONTEXT_2D = CANVAS.getContext("2d");
  62. 		const FUN_IMG_WIDTH = CANVAS.parentNode.clientWidth;
  63. 		const FUN_IMG_HEIGHT = CANVAS.parentNode.clientHeight;
  64. 		var xLeftValue = -FUN_IMG_WIDTH / 100; // x最左的值
  65. 		var xRightValue = FUN_IMG_WIDTH / 100;
  66. 		var yLeftValue = -FUN_IMG_HEIGHT / 100;
  67. 		var yRightValue = FUN_IMG_HEIGHT / 100;
  68. 		var tableX, tableY, countX, countY;
  69. 		var funStage = 0,
  70. 			mouseX, mouseY;
  71. 		var tmp;
  72. 	</script>
  73. 	<script>
  74. 		CANVAS.width = FUN_IMG_WIDTH;
  75. 		CANVAS.height = FUN_IMG_HEIGHT;
  76. 		$("show-size").innerHTML = "Size：" + FUN_IMG_WIDTH + "*" + FUN_IMG_HEIGHT;
  78. 		CANVAS.onmousedown = function(ob) {
  79. 			mouseX = ob.layerX;
  80. 			mouseY = ob.layerY;
  81. 			funStage = 1;
  82. 		}
  83. 		CANVAS.onmousemove = function(ob) {
  84. 			if(funStage != 1) {
  85. 				return;
  86. 			}
  87. 			var NoX, NoY, det;
  88. 			NoX = ob.layerX;
  89. 			NoY = ob.layerY;
  90. 			det = (mouseX - NoX) / FUN_IMG_WIDTH * (xRightValue - xLeftValue);
  91. 			xLeftValue += det;
  92. 			xRightValue += det;
  93. 			det = (NoY - mouseY) / FUN_IMG_HEIGHT * (yRightValue - yLeftValue);
  94. 			yLeftValue += det;
  95. 			yRightValue += det;
  96. 			mouseX = NoX;
  97. 			mouseY = NoY;
  98. 			reDraw();
  99. 			update();
  100. 		}
  101. 		CANVAS.onmouseup = function(ob) {
  102. 			if(funStage == 1) {
  103. 				funStage = 0;
  104. 				reDraw();
  105. 			}
  106. 		}
  107. 		CANVAS.onmouseleave = function(ob) {
  108. 			if(funStage == 1) {
  109. 				funStage = 0;
  110. 				reDraw();
  111. 			}
  112. 		}
  113. 		CANVAS.onmousewheel = function(ob) {
  114. 			// 取消事件的默认动作
  115. 			ob.preventDefault();
  116. 			// 放大的比例
  117. 			var ScaleRate = 0.9;
  118. 			var detail;
  119. 			if(ob.wheelDelta) {
  120. 				detail = ob.wheelDelta;
  121. 			} else if(ob.detail) {
  122. 				detail = ob.detail;
  123. 			}
  124. 			if(detail > 0) {
  125. 				scale(ob.layerX, FUN_IMG_HEIGHT - 1 - ob.layerY, ScaleRate);
  126. 			} else {
  127. 				scale(ob.layerX, FUN_IMG_HEIGHT - 1 - ob.layerY, 1 / ScaleRate);
  128. 			}
  129. 			reDraw();
  130. 			update();
  131. 		}
  132. 		// 初始化
  133. 		reDraw();
  134. 		update();
  135. 		Add();
  136. 	</script>
  138. </html>

funcImg.js

  1. function $(id) {
  2. 	return document.getElementById(id);
  3. }
  5. function getRandomColor() {
  6. 	var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
  7. 	return color;
  8. }
  10. function FunWork(f, x) {
  11. 	switch(f) {
  12. 		case "":
  13. 			{
  14. 				return x;
  15. 				break;
  16. 			}
  17. 		case "sin":
  18. 			{
  19. 				return Math.sin(x);
  20. 				break;
  21. 			}
  22. 		case "cos":
  23. 			{
  24. 				return Math.cos(x);
  25. 				break;
  26. 			}
  27. 		case "tan":
  28. 			{
  29. 				return Math.tan(x);
  30. 				break;
  31. 			}
  32. 		case "abs":
  33. 			{
  34. 				return Math.abs(x);
  35. 				break;
  36. 			}
  37. 		case "sqrt":
  38. 			{
  39. 				return Math.sqrt(x);
  40. 				break;
  41. 			}
  42. 		case "ln":
  43. 			{
  44. 				return Math.log(x);
  45. 				break;
  46. 			}
  47. 		case "log":
  48. 			{
  49. 				return Math.log(x) / Math.LN2;
  50. 				break;
  51. 			} //2为底
  52. 		case "lg":
  53. 			{
  54. 				return Math.log(x) / Math.LN10;
  55. 				break;
  56. 			} //10为底
  57. 		case "floor":
  58. 			{
  59. 				return Math.floor(x);
  60. 				break;
  61. 			}
  62. 		case "ceil":
  63. 			{
  64. 				return Math.ceil(x);
  65. 				break;
  66. 			}
  67. 		case "int":
  68. 			{
  69. 				return parseInt(x);
  70. 				break;
  71. 			}
  72. 		default:
  73. 			{
  74. 				return NaN;
  75. 				break;
  76. 			}
  77. 	}
  78. }
  80. function ChangeToPointY(y) {
  81. 	return FUN_IMG_HEIGHT - 1 - parseInt((y - yLeftValue) / (yRightValue - yLeftValue) * FUN_IMG_HEIGHT);
  82. }
  84. function isChar(c) {
  85. 	return(c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
  86. }
  88. function isDigit(c) {
  89. 	return c >= '0' && c <= '9';
  90. }
  92. function priority(c) {
  93. 	switch(c) {
  94. 		case '(':
  95. 			return 0;
  96. 			break;
  97. 		case '+':
  98. 			return 1;
  99. 			break;
  100. 		case '-':
  101. 			return 1;
  102. 			break;
  103. 		case '*':
  104. 			return 2;
  105. 			break;
  106. 		case '/':
  107. 			return 2;
  108. 			break;
  109. 		case '^':
  110. 			return 3;
  111. 			break;
  112. 		default:
  113. 			return -1;
  114. 			break;
  115. 	}
  116. }
  117. // 是运算符
  118. function isOpt(c) {
  119. 	return priority(c) != -1;
  120. }
  122. function singleCalc(c, a, b) {
  123. 	if(c == '+') {
  124. 		return a + b;
  125. 	} else
  126. 	if(c == '-') {
  127. 		return a - b;
  128. 	} else
  129. 	if(c == '*') {
  130. 		return a * b;
  131. 	} else
  132. 	if(c == '/') {
  133. 		return a / b;
  134. 	} else
  135. 	if(c == '^') {
  136. 		return Math.pow(a, b);
  137. 	} else {
  138. 		return NaN;
  139. 	}
  140. }
  142. function getTable() {
  143. 	tmp = (xRightValue - xLeftValue + EPS) / 20;
  145. 	tableX = 1;
  146. 	countX = 0;
  147. 	countY = 0;
  148. 	while(tableX < tmp) {
  149. 		tableX *= 10;
  150. 	}
  151. 	while(tableX / 10 > tmp) {
  152. 		tableX /= 10;
  153. 		countX++;
  154. 	}
  155. 	if(tableX >= 1) {
  156. 		countX = 0;
  157. 	}
  158. 	if(tableX / 5 > tmp) {
  159. 		tableX /= 5;
  160. 		countX++;
  161. 	} else if(tableX / 2 > tmp) {
  162. 		tableX /= 2;
  163. 		countX++;
  164. 	}
  165. 	var i = parseInt(xLeftValue / tableX) + (xLeftValue > 0)
  166. 	for(; i * tableX < xRightValue; i++) {
  167. 		if(i == 0) {
  168. 			// y轴
  169. 			CONTEXT_2D.fillStyle = "black";
  170. 		} else {
  171. 			// 普通竖线
  172. 			CONTEXT_2D.fillStyle = "#CDB7B5";
  173. 		}
  174. 		tmp = (i * tableX - xLeftValue) / (xRightValue - xLeftValue) * FUN_IMG_WIDTH;
  175. 		var _width = 1;
  176. 		var _height = FUN_IMG_HEIGHT;
  177. 		CONTEXT_2D.fillRect(tmp, 0, _width, _height);
  178. 		// 竖线上的数字
  179. 		CONTEXT_2D.fillStyle = "red";
  180. 		CONTEXT_2D.font = FONT_STYLE;
  181. 		var _text = (i * tableX).toFixed(countX);
  182. 		var _x = tmp + 2;
  183. 		var _y = 10;
  184. 		CONTEXT_2D.fillText(_text, _x, _y);
  185. 	}
  186. 	tmp = (yRightValue - yLeftValue + EPS) / 20;
  187. 	tableY = 1;
  189. 	while(tableY < tmp) {
  190. 		tableY *= 10;
  191. 	}
  192. 	while(tableY / 10 > tmp) {
  193. 		tableY /= 10, countY++;
  194. 	}
  195. 	if(tableY / 5 > tmp) {
  196. 		tableY /= 5, countY++;
  197. 	} else if(tableY / 2 > tmp) {
  198. 		tableY /= 2, countY++;
  199. 	}
  200. 	if(tableY >= 1) {
  201. 		countY = 0;
  202. 	}
  203. 	var i = parseInt(yLeftValue / tableY) + (yLeftValue > 0);
  204. 	for(; i * tableY < yRightValue; i++) {
  205. 		// 横线
  206. 		if(i == 0) {
  207. 			// x轴
  208. 			CONTEXT_2D.fillStyle = "black";
  209. 		} else {
  210. 			// 普通横线
  211. 			CONTEXT_2D.fillStyle = "#CDB7B5";
  212. 		}
  213. 		tmp = (i * tableY - yLeftValue) / (yRightValue - yLeftValue) * FUN_IMG_HEIGHT;
  214. 		CONTEXT_2D.fillRect(0, FUN_IMG_HEIGHT - 1 - tmp, FUN_IMG_WIDTH, 1);
  215. 		// 横线上的数字
  216. 		CONTEXT_2D.fillStyle = "blue";
  217. 		CONTEXT_2D.font = FONT_STYLE;
  218. 		CONTEXT_2D.fillText((i * tableY).toFixed(countY), 0, FUN_IMG_HEIGHT - 1 - tmp);
  219. 	}
  220. }
  222. function drawArc(x, y) {
  223. 	CONTEXT_2D.beginPath();
  224. 	// arc(弧形),画圆
  225. 	CONTEXT_2D.arc(x, y, 1, 0, Math.PI * 2);
  226. 	CONTEXT_2D.closePath();
  227. 	CONTEXT_2D.fill();
  228. }
  230. function drawLine(lx, ly, px, py) {
  231. 	CONTEXT_2D.beginPath();
  232. 	CONTEXT_2D.moveTo(lx, ly);
  233. 	CONTEXT_2D.lineTo(px, py);
  234. 	CONTEXT_2D.closePath();
  235. 	CONTEXT_2D.stroke(); // 绘制
  236. }
  238. function reDraw() {
  239. 	CONTEXT_2D.clearRect(0, 0, FUN_IMG_WIDTH, FUN_IMG_HEIGHT);
  240. 	getTable();
  241. 	getFunction();
  242. }
  244. function change() {
  245. 	xLeftValue = parseFloat($("xLeftValue").value);
  246. 	xRightValue = parseFloat($("xRightValue").value);
  247. 	yLeftValue = parseFloat($("yLeftValue").value);
  248. 	yRightValue = parseFloat($("yRightValue").value);
  249. 	reDraw();
  250. }
  252. function update() {
  253. 	$("xLeftValue").value = xLeftValue;
  254. 	$("xRightValue").value = xRightValue;
  255. 	$("yLeftValue").value = yLeftValue;
  256. 	$("yRightValue").value = yRightValue;
  257. }
  259. function scale(x, y, times) {
  260. 	if(x < 0 || x >= FUN_IMG_WIDTH || y < 0 || y >= FUN_IMG_HEIGHT) return;
  262. 	if(times < 1 && (xRightValue - xLeftValue < MIN || yRightValue - yLeftValue < MIN)) {
  263. 		return;
  264. 	}
  265. 	if(times > 1 && (xRightValue - xLeftValue > MAX || yRightValue - yLeftValue > MAX)) {
  266. 		return;
  267. 	}
  269. 	x = xLeftValue + (xRightValue - xLeftValue) / FUN_IMG_WIDTH * x;
  270. 	y = yLeftValue + (yRightValue - yLeftValue) / FUN_IMG_HEIGHT * y;
  271. 	xLeftValue = x - (x - xLeftValue) * times;
  272. 	xRightValue = x + (xRightValue - x) * times;
  273. 	yLeftValue = y - (y - yLeftValue) * times;
  274. 	yRightValue = y + (yRightValue - y) * times;
  275. }
  277. function Calc(fun, X, Value) {
  278. 	var number = new Array(),
  279. 		opt = new Array(),
  280. 		F = new Array(),
  281. 		now = 0,
  282. 		f = "",
  283. 		tmp, a, b, sign = 1,
  284. 		base = 0,
  285. 		j;
  286. 	for(var i = 0; i < fun.length; i++) {
  287. 		for(j = 0; j < X.length; j++)
  288. 			if(X[j] == fun[i]) {
  289. 				if(i == 0 || isOpt(fun[i - 1])) now = Value[j];
  290. 				else now *= Value[j];
  291. 				break;
  292. 			}
  293. 		if(j == X.length)
  294. 			if(fun[i] == '(') F.push(f), f = "", opt.push('(');
  295. 			else
  296. 		if(fun[i] == ')') {
  297. 			number.push(now * sign);
  298. 			now = 0;
  299. 			sign = 1;
  300. 			base = 0;
  301. 			while((tmp = opt.pop()) != '(') {
  302. 				b = number.pop();
  303. 				a = number.pop();
  304. 				tmp = singleCalc(tmp, a, b);
  305. 				number.push(tmp);
  306. 			}
  307. 			now = FunWork(F.pop(), number.pop());
  308. 		} else
  309. 		if(fun[i] == '.') base = 1;
  310. 		else
  311. 		if(fun[i] == '+' && (i == 0 || priority(fun[i - 1]) != -1));
  312. 		else
  313. 		if(fun[i] == '-' && (i == 0 || priority(fun[i - 1]) != -1)) sign = -1;
  314. 		else
  315. 		if(fun[i] == 'e')
  316. 			if(i == 0 || isOpt(fun[i - 1])) now = Math.E;
  317. 			else now *= Math.E;
  318. 		else
  319. 		if(fun[i] == 'p' && fun[i + 1] == 'i') {
  320. 			if(i == 0 || isOpt(fun[i - 1])) now = Math.PI;
  321. 			else now *= Math.PI;
  322. 			i += 1;
  323. 		} else
  324. 		if(isDigit(fun[i]))
  325. 			if(base == 0) now = now * 10 + (fun[i] - '0');
  326. 			else base /= 10, now += base * (fun[i] - '0');
  327. 		else
  328. 		if(isChar(fun[i])) f += fun[i];
  329. 		else if(isOpt(fun[i])) {
  330. 			number.push(now * sign);
  331. 			now = 0;
  332. 			sign = 1;
  333. 			base = 0;
  334. 			var s = priority(fun[i]);
  335. 			if(s == -1) return 0;
  336. 			while(s <= priority(opt[opt.length - 1])) {
  337. 				b = number.pop();
  338. 				a = number.pop();
  339. 				tmp = singleCalc(opt.pop(), a, b);
  340. 				number.push(tmp);
  341. 			}
  342. 			opt.push(fun[i]);
  343. 		}
  344. 	}
  345. 	number.push(now * sign);
  346. 	while(opt.length > 0) {
  347. 		b = number.pop();
  348. 		a = number.pop();
  349. 		tmp = singleCalc(opt.pop(), a, b);
  350. 		number.push(tmp);
  351. 	}
  352. 	return number.pop();
  353. }
  355. function getFunction() {
  356. 	// group：函数（可能是复数）
  357. 	var group = document.getElementsByName("Fun");
  358. 	var x, y;
  359. 	var lax, lay;
  360. 	var px, py
  361. 	var color, outSide, type
  362. 	var ValueL, ValueR, ValueS, isDrawLine, tmp, TMP;
  364. 	for(var k = 1; k < group.length; k++) {
  366. 		var _funcItem = group[k].parentNode;
  368. 		outSide = 1;
  369. 		//type = _funcItem.children[0].value;
  370. 		// 颜色
  371. 		color = _funcItem.children[0].value;
  372. 		// 函数表达式
  373. 		funcExpression = group[k].value;
  374. 		// 是否画线（默认画点）
  375. 		isDrawLine = _funcItem.children[3].checked;
  377. 		CONTEXT_2D.fillStyle = CONTEXT_2D.strokeStyle = color;
  379. 		for(var i = 0; i < FUN_IMG_WIDTH; i++) {
  380. 			x = xLeftValue + (xRightValue - xLeftValue) / FUN_IMG_WIDTH * i;
  381. 			y = Calc(funcExpression, ['x'], [x]);
  382. 			if(isNaN(y)) {
  383. 				continue;
  384. 			}
  385. 			px = i;
  386. 			py = ChangeToPointY(y);
  387. 			if(y >= yLeftValue && y < yRightValue) {
  388. 				// 画圆
  389. 				drawArc(px, py);
  390. 				if(isDrawLine) {
  391. 					drawLine(lax, lay, px, py);
  392. 				}
  393. 				outSide = 0;
  394. 			} else {
  395. 				if(isDrawLine) {
  396. 					if(!outSide) {
  397. 						drawLine(lax, lay, px, py);
  398. 					}
  399. 				} else {}
  400. 				outSide = 1;
  401. 			}
  402. 			lax = px;
  403. 			lay = py;
  404. 		}
  405. 	}
  406. }
  408. function Add() {
  409. 	var newInput = $("mod").cloneNode(true);
  410. 	newInput.style.display = "block";
  411. 	newInput.children[0].value = getRandomColor();
  412. 	$("function").appendChild(newInput);
  413. }
  415. function Delete(node) {
  416. 	node.parentNode.removeChild(node);
  417. }

HTML+JavaScript画函数图像的更多相关文章

  1. Catlike学习笔记(1.2)-使用Unity画函数图像

    『Catlike系列教程』第二篇来了~今天周六,早上(上午11点)醒来去超市买了一周的零食回来以后就玩了一整天游戏非常有负罪感.现在晚上九点天还亮着感觉像下午7点左右的样子好像还不是很晚...所以就写 ...

  2. [Java画图]画函数图像

    利用Graphics类画任意显式函数图像,只需修改代码中的F()函数即可,另外调整timesx和timesy参数来分方向放大或缩小图像.需要重定义坐标系. package test; import j ...

  3. javascript自制函数图像生成器

    出于某种目的想做这个东西,顺便可以提供给GMA的用户&&放在博客园. 实现上只是简单的描点,加上一个相邻两点连线的开关,完全没有技术含量.而且函数图像一旦多起来就会变卡. 瓶颈在隐函数 ...

  4. 用python画函数图像

    import matplotlib.pyplot as plt import numpy as np x = np.linspace(0, 1, 50) # 从0到1,等分50分 y = 210*(x ...

  5. Catlike学习笔记(1.3)-使用Unity画更复杂的3D函数图像

    第三篇来了-今天去参加了 Unite 2018 Berlin,感觉就是....非常困...回来以后稍微睡了下清醒了觉得是时候认真学习下了,不过讲的很多东西都是还没有发布或者只有 Preview 的版本 ...

  6. Javascript 随机数函数 学习之二：产生服从正态分布随机数

    一.为什么需要服从正态分布的随机函数 一般我们经常使用的随机数函数 Math.random() 产生的是服从均匀分布的随机数,能够模拟等概率出现的情况,例如 扔一个骰子,1到6点的概率应该相等,但现实 ...

  7. javascript + jquery函数大全

    JAVASCRIPT Array 函数   array创建数组 concat()连接两个或更多的数组,并返回结果. join()把数组中所有元素组成字符串. pop()删除并返回数组的最后一个元素 s ...

  8. python如何画三维图像？

    python三维图像输出的代码如下所示:#画3D函数图像输出from mpl_toolkits.mplot3d import Axes3Dfrom matplotlib import cmimport ...

  9. JavaScript中函数函数的定义与变量的声明<基础知识一>

    1.JavaScript中函数的三种构造方式 a.function createFun(){ } b.var createFun=function (){ } c.var createFun=new ...

随机推荐

  1. JavaScript核心 Dom Bom

    <div id="time">2020-9-27</div> <script> //文档页面从上往下加载,先有标签才能获取元素对象,script ...

  2. 前端小程序——js+canvas 给图片添加水印

    市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: <canvas id="shuiyinTest"> < ...

  3. error:docker-ce conflicts with 2:docker-1.13.1-74.git6e3bb8e.el7.centos.x86_64

    问题原因:安装docker之前有安装cockpit-docker服务 解决方法:卸载docker-ce [root@localhost ~]# yum list installed | grep do ...

  4. ViewModel和LiveData问题思考与解答

    嗨,大家好,面试真题系列又来了,今天我们说说MVVM架构里的两大组件:ViewModel和LiveData. 还是老样子,提出问题,做出解答. ViewModel 是什么? ViewModel 为什么 ...

  5. 【故障公告】博客站点再次出现故障，最终回退 .NET 5.0 恢复正常

    自从博客系统升级 .NET 5.0 之后遇到的诡异故障(一.二.三.四),今天它又出现了,就在前天刚刚故障之后, 就在昨天 .NET 5.0 正式版刚刚发布之后,出现了. 今天晚上我们在 19:30 ...

  6. Mac环境MySql初始密码设置

    1. 首先 点击系统偏好设置 -> 点击MySQL, 在弹出的页面中,关闭服务.2. 进入终端命令输出: cd /usr/local/mysql/bin/ 命令,回车.3. 回车后,输入命令:s ...

  7. ECMAScript6标准-简介

    Introduction This Ecma Standard defines the ECMAScript 2015 Language. It is the sixth edition of the ...

  8. win10，安装 vmware 后没有虚拟网卡，导致虚拟机没有 ip

    1.确认关闭windows firewall 服务,最保险的关闭时先把服务改为手动再关闭防止塔自动启动! 2.确认开启Device  Install Service .Device Setup Ser ...

  9. TypeError: react__WEBPACK_IMPORTED_MODULE_2___default.a.createClass is not a function

    在看阮一峰的react入门的时候,写到一段代码,但是写完就报错了,经过多方查找,终于解决掉了 错误描述: 解决方法: 将React.createClass换成React.Component, 但是不知 ...

  10. 判断机器是big-endian、little-endian

    联合体union和大小端(big-endian.little-endian):下边示范了一种用途,代表四个含义的四个变量,但是可以用一个int来操作,直接int赋值,无论内存访问(指针大小的整数倍,访 ...