Bresenham提出的直线生成算法的基本原理是，每次在最大位移方向上走一步，而另一个方向是走步还是不走步取决于误差项的判别，具体的实现过程大家可以去问度娘。我主要是利用canvas画布技术实现了这个过程，算法可能还是有点小问题，欢迎大家给我留言建议，一定虚心接受。

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>中点Bresenham算法</title>
  6. 	<style>
  7. 	    * {
  8. 	    	margin: 0;
  9. 	    	padding: 0;
  10. 	    }
  11. 	    body {
  12. 	        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
  13. 	        color: #555;
  14. 	    }
  15. 		.left {
  16. 			float: left;
  17. 			margin: 20px 0 0 calc((100% - 401px - 602px)/2);
  18. 			width: 400px;
  19. 			height: 600px;
  20. 			border: 1px solid #cccccc;
  21. 			border-right: none;
  22. 		}
  23. 		.left header {
  24. 			margin: 0 10px;
  25. 			-webkit-box-sizing: border-box;
  26. 			-moz-box-sizing: border-box;
  27. 			box-sizing: border-box;
  28. 			height: 60px;
  29. 			line-height: 60px;
  30. 			font-size: 18px;
  31. 			/*text-align: center;*/
  32. 			border-bottom: 2px solid #aaa;
  33. 		}
  34. 		.start {
  35. 			margin: 0 25px;
  36. 			line-height: 80px;
  37. 			/*text-align: center;*/
  38. 		}
  39. 		.left input[type="text"] {
  40. 			padding: 2px 5px;
  41. 			width: 30px;
  42. 			-webkit-box-sizing: border-box;
  43. 			-moz-box-sizing: border-box;
  44. 			box-sizing: border-box;
  45. 			background-color: #f5f5f5;
  46. 			border: 1px solid #cccccc;
  47. 		}
  48. 		button {
  49. 			border: none;
  50. 			display: inline-block;
  51. 			outline: 0;
  52. 			padding: 6px 16px;
  53. 			margin-bottom: 10px;
  54. 			vertical-align: middle;
  55. 			overflow: hidden;
  56. 			text-decoration: none;
  57. 			color: #fff;
  58. 			background-color: #F88E8B;
  59. 			text-align: center;
  60. 			transition: .2s ease-out;
  61. 			cursor: pointer;
  62. 			white-space: nowrap;
  63. 			box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
  64. 		}
  65. 		button:hover {
  66. 			background-color: #F35F5C;
  67. 		}
  68. 		#stroke {
  69. 			margin-left: 25px;
  70. 		}
  71. 		#reset {
  72. 			margin-left: 10px;
  73. 		}
  74. 		/*.left button {
  75. 			display: block;
  76. 			margin: 0 auto;
  77. 		}*/
  78. 		#xy {
  79. 			/*display: none;*/
  80. 		}
  81. 		.left p {
  82. 			line-height: 40px;
  83. 			text-align: center;
  84. 		}
  85. 		.table {
  86. 			position: relative;
  87. 			padding-top: 30px;
  88. 			max-height: 373px;
  89. 			overflow-y: auto;
  90. 			-webkit-box-sizing: border-box;
  91. 			-moz-box-sizing: border-box;
  92. 			box-sizing: border-box;
  93. 		}
  94. 		#thead {
  95. 			position: absolute;
  96. 			z-index: 999;
  97. 			width: 370px;
  98. 			margin-left: 10px;
  99. 		}
  100. 		.left table {
  101. 			margin: 0 0 10px 10px;
  102. 			width: 370px;
  103. 			border-collapse:collapse;
  104. 		}
  105. 		.left table th{
  106. 			width: 33.3333%;
  107. 			height: 30px;
  108. 			border: 1px solid #cccccc;
  109. 			background-color: #f1f1f1;
  110. 		}
  111. 		.left table td{
  112. 			width: 33.3333%;
  113. 			height: 30px;
  114. 			text-align: center;
  115. 			border: 1px solid #cccccc;
  116. 		}
  117. 		#myCanvas {
  118. 			display: block;
  119. 			float: left;
  120. 			margin-top: 20px;
  121. 			background-color: #fffdf6;
  122. 			border: 1px solid #cccccc;
  123. 		}
  124. 	</style>
  125.     </head>
  126.     <body>
  127. 	<div class="left" id="left">
  128. 		<header>&nbsp;&nbsp;中点 <strong>Bresenham</strong> 算法</header>
  129. 		<div class="start">
  130. 			直线方程 :
  131. 			<input type="text" id="A" required autocomplete="off"> x + <input type="text" id="B" required autocomplete="off"> y + <input type="text" id="C" required autocomplete="off"> = 0
  132. 		</div>
  133. 		<button id="stroke">开始绘制</button>
  134. 		<button id="reset">重置</button>
  136. 		<div id="xy" style="display: none;">
  137. 			<p><strong>坐标值</strong></p>
  138. 			<table id="thead">
  139. 				<tr>
  140. 					<th> X </th>
  141. 					<th> Y </th>
  142. 					<th> d </th>
  143. 				</tr>
  144. 			</table>
  145. 			<div class="table">
  146. 				<table id="table">
  147. 					<!-- <tr>
  148. 						<th> X </th>
  149. 						<th> Y </th>
  150. 						<th> d </th>
  151. 					</tr> -->
  152. 				</table>
  153. 			</div>
  154. 		</div>
  156. 	</div>
  157. 	<canvas id="myCanvas" width="600" height="600">
  158. 		您的浏览器不支持canvas，请升级浏览器！
  159. 	</canvas>
  161. 	<script>
  163. 		//*-----------------canvas画坐标表格---------------------*
  164. 		var canvas=document.getElementById("myCanvas");
  165. 		var context=canvas.getContext("2d");
  167. 		function drowAxes() {
  168. 			// 描绘边框
  169. 			var grid_cols = 20;
  170. 			var grid_rows = 20;
  171. 			var cell_height = canvas.height / grid_rows;
  172. 			var cell_width = canvas.width / grid_cols;
  173. 			context.lineWidth = 1;
  174. 			context.strokeStyle = "#cccccc";
  176. 			// 结束边框描绘
  177. 			context.beginPath();
  178. 			// 准备画横线
  179. 			for (var col = 1; col <= grid_cols; col++) {
  180. 			  var x = col * cell_width;
  181. 			  if(col == 10) {
  182. 			  	context.beginPath();
  183. 			  	context.strokeStyle = "#2FB9D6";
  184. 			  	context.moveTo(x+0.5,0);
  185. 			  	context.lineTo(x+0.5,canvas.height);
  186. 			  	context.stroke();
  187. 			  }
  188. 			  else {
  189. 			  	context.beginPath();
  190. 			  	context.strokeStyle = "#cccccc";
  191. 			  	context.moveTo(x+0.5,0);
  192. 			  	context.lineTo(x+0.5,canvas.height);
  193. 			  	context.stroke();
  194. 			  }
  195. 			}
  196. 			//准备画竖线
  197. 			for(var row = 1; row <= grid_rows; row++){
  198. 			  var y = row * cell_height;
  199. 			  if(row == 10) {
  200. 			  	context.beginPath();
  201. 			  	context.strokeStyle = "#2FB9D6";
  202. 			  	context.moveTo(0,y+0.5);
  203. 			  	context.lineTo(canvas.width, y+0.5);
  204. 			  	context.stroke();
  205. 			  }
  206. 			  else {
  207. 			  	context.beginPath();
  208. 			  	context.strokeStyle = "#cccccc";
  209. 			  	context.moveTo(0,y+0.5);
  210. 			    context.lineTo(canvas.width, y+0.5);
  211. 			  	context.stroke();
  212. 			  }
  213. 			}
  214. 			context.stroke();
  216. 			//给坐标轴加刻度
  217. 			for(var i=0;i <= grid_cols;i++) {
  218. 				var x = i * cell_width;
  219. 				context.font="13px Arial";
  220. 				context.fillStyle="#000";
  221. 				context.fillText(-10+i,5 + x,315);
  222. 			}
  223. 			for(var i=0;i <= grid_rows;i++) {
  224. 				var y = i * cell_height;
  225. 				context.font="13px Arial";
  226. 				context.fillStyle="#000";
  227. 				context.fillText(10-i,305,15 + y);
  228. 			}
  229. 		}
  231. 		//坐标生成及Canvas画点函数
  232. 		function drawDot(x,y,d) {
  233. 			var tr=document.createElement("tr");
  234. 			var td1=document.createElement("td");
  235. 			var node1=document.createTextNode(" "+Math.round(x)+" ");
  236. 			td1.appendChild(node1);
  237. 			tr.appendChild(td1);
  239. 			var td2=document.createElement("td");
  240. 			var node2=document.createTextNode(" "+Math.round(y)+" ");
  241. 			td2.appendChild(node2);
  242. 			tr.appendChild(td2);
  244. 			var td3=document.createElement("td");
  245. 			var node3=document.createTextNode(" "+d.toFixed(2)+" ");
  246. 			td3.appendChild(node3);
  247. 			tr.appendChild(td3);
  249. 			document.getElementById("table").appendChild(tr);
  251. 			//坐标处理
  252. 			var X,Y;
  253. 			X= Math.round(x)*30;
  254. 			Y=- Math.round(y)*30;
  255. 			//表格中绘制坐标点
  256. 			context.fillStyle="#2FB9D6";
  257. 			context.beginPath();
  258. 			context.arc(X,Y,4,0,Math.PI*2,true);
  259. 			context.closePath();
  260. 			context.fill();
  261. 		}
  263. 	    //判断输入的字符是否为整数
  264. 	    function IsInteger()
  265. 	    {
  266. 	            var str1 = document.getElementById('A').value.trim();
  267. 	            var str2 = document.getElementById('B').value.trim();
  268. 	            var str3 = document.getElementById('C').value.trim();
  269. 	            if(str1.length!=0 && str2.length!=0 && str3.length!=0){
  270. 		            reg=/^[-+]?\d*$/;
  271. 		            if(!reg.test(str1) || !reg.test(str2) || !reg.test(str3)){
  272. 		                alert("对不起，请输入整数!");//请将“整数类型”要换成你要验证的那个属性名称！
  273. 		                return false;
  274. 		            }
  275. 		            else {return true;}
  276. 	            }
  277. 	    } 
  279. 		window.onload = drowAxes();
  280. 		var canvas_flag=0;//设置是否画线的标记变量
  282. 		//*-----------------中点Bresenham算法求坐标--------------------*
  283. 		document.getElementById("stroke").onclick=function Bresenham(){
  284. 			var xy=document.getElementById("xy");
  286. 			var A=document.getElementById("A").value;
  287. 			var B=document.getElementById("B").value;
  288. 			var C=document.getElementById("C").value;
  290. 			if(A.length == 0 || B.length == 0 || C.length == 0) {alert("请填写直线方程的系数！")}
  291. 			//直线上取两个点
  292. 			if(xy.style.display === 'none' && A.length != 0 && B.length != 0 && C.length != 0 && IsInteger()) {
  293. 				if(A==0 && B==0 && C!=0) {alert("输入错误，请重新输入！");}
  294. 				else if(A==0 && B==0 && C==0) {alert("输入数据不能全部为0！")}
  295. 				else if(A==0 && B!=0) { //y=c 类方程
  296. 					context.translate(300,300);//将坐标原点移到（300,300）处
  298. 					//绘制直线
  299. 					var c=-Math.round(C/B)*30;
  300. 					context.beginPath();
  301. 					context.strokeStyle="#2FB9D6";
  302. 					context.moveTo(-300,c);
  303. 					context.lineTo(300,c);
  304. 					context.closePath();
  305. 					context.stroke();
  307. 					canvas_flag=1;//标记变量置1
  309. 				}
  310. 				else if(A!=0 && B==0) { //x=c 类方程
  311. 					context.translate(300,300);//将坐标原点移到（300,300）处
  313. 					//绘制直线
  314. 					var c=-Math.round(C/A)*30;
  315. 					context.beginPath();
  316. 					context.strokeStyle="#2FB9D6";
  317. 					context.moveTo(c,-300);
  318. 					context.lineTo(c,300);
  319. 					context.closePath();
  320. 					context.stroke();
  322. 					canvas_flag=1;//标记变量置1
  324. 				}
  325. 				else if(-A/B>=0){  //斜率大于等于0的情况
  326. 					xy.style.display = 'block';
  327. 					var x0,y0,x1,y1;
  328. 					var vx,vy;
  329. 					var d; //增长量
  330. 					var m,n; //循环变量
  331. 					var x,y;
  333. 					var k = -A/B;
  334. 					if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
  335. 						x0 = -5;x1 = 5;
  336. 						y0 = (-C -A*x0)/B;
  337. 						y1 = (-C -A*x1)/B;
  338. 						vx = x1 - x0,vy = y1 - y0;
  339. 						x = x0,y = y0;
  340. 						n = x0;
  341. 						m = x1;
  342. 						d = vx - 2*vy; //初始化d
  343. 					}
  344. 					else if(k>1) { //k大于1的情况
  345. 						y0 = -5;y1 = 5;
  346. 						x0 = (-C -B*y0)/A;
  347. 						x1 = (-C -B*y1)/A;
  348. 						vx = x1 - x0,vy = y1 - y0;
  349. 						x = x0,y = y0;
  350. 						n = y0;
  351. 						m = y1;
  352. 						d = 2*vx - vy; //初始化d
  353. 					}
  354. 					context.translate(300,300);//将坐标原点移到（300,300）处
  355. 					for(var i=n;i<=m;i++) {
  357. 						//----------------算法核心代码---------------
  358. 						if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
  359. 							drawDot(x,y,d);
  360. 							if(d<0) {
  361. 								x = x + 1;
  362. 								y = y + 1;
  363. 								d = d + 2*vx - 2*vy;
  364. 							}
  365. 							else {
  366. 								x = x + 1;
  367. 								y = y;
  368. 								d = d - 2*vy;
  369. 							}
  370. 						}
  371. 						else if(k>1) { //k大于1的情况
  372. 							drawDot(x,y,d);
  373. 							if(d<0) {
  374. 								x = x;
  375. 								y = y + 1;
  376. 								d = d + 2*vx;
  377. 							}
  378. 							else {
  379. 								x = x + 1;
  380. 								y = y + 1;
  381. 								d = d - 2*vy + 2*vx;
  382. 							}
  383. 						}
  385. 					}
  386. 					//绘制直线
  387. 					var X0,Y0,X1,Y1;
  388. 					X0= Math.round(x0)*30;
  389. 					Y0=-Math.round(y0)*30;
  390. 					X1=Math.round(x1)*30;
  391. 					Y1=-Math.round(y1)*30;
  392. 					context.beginPath();
  393. 					context.strokeStyle="#2FB9D6";
  394. 					context.moveTo(X0,Y0);
  395. 					context.lineTo(X1,Y1);
  396. 					context.closePath();
  397. 					context.stroke();
  399. 					canvas_flag=1;//标记变量置1
  400. 				}
  401. 				else if(-A/B<0){ //斜率小于0的情况
  402. 					//将直线转化为斜率大于等于0的情况，然后求关于x轴对称的直线就行
  403. 					xy.style.display = 'block';
  404. 					A = -A;
  405. 					var x0,y0,x1,y1;
  406. 					var vx,vy;
  407. 					var d; //增长量
  408. 					var m,n; //循环变量
  409. 					var x,y;
  411. 					var k = -A/B;
  412. 					if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
  413. 						x0 = -5;x1 = 5;
  414. 						y0 = (-C -A*x0)/B;
  415. 						y1 = (-C -A*x1)/B;
  416. 						vx = x1 - x0,vy = y1 - y0;
  417. 						x = x0,y = y0;
  418. 						n = x0;
  419. 						m = x1;
  420. 						d = vx - 2*vy; //初始化d
  421. 					}
  422. 					else if(k>1) { //k大于1的情况
  423. 						y0 = -5;y1 = 5;
  424. 						x0 = (-C -B*y0)/A;
  425. 						x1 = (-C -B*y1)/A;
  426. 						vx = x1 - x0,vy = y1 - y0;
  427. 						x = x0,y = y0;
  428. 						n = y0;
  429. 						m = y1;
  430. 						d = 2*vx - vy; //初始化d
  431. 					}
  432. 					context.translate(300,300);//将坐标原点移到（300,300）处
  433. 					for(var i=n;i<=m;i++) {
  435. 						//----------------算法核心代码---------------
  436. 						if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
  437. 							drawDot(-x,y,d);
  438. 							if(d<0) {
  439. 								x = x + 1;
  440. 								y = y + 1;
  441. 								d = d + 2*vx - 2*vy;
  442. 							}
  443. 							else {
  444. 								x = x + 1;
  445. 								y = y;
  446. 								d = d - 2*vy;
  447. 							}
  448. 						}
  449. 						else if(k>1) { //k大于1的情况
  450. 							drawDot(-x,y,d);
  451. 							if(d<0) {
  452. 								x = x;
  453. 								y = y + 1;
  454. 								d = d + 2*vx;
  455. 							}
  456. 							else {
  457. 								x = x + 1;
  458. 								y = y + 1;
  459. 								d = d - 2*vy + 2*vx;
  460. 							}
  461. 						}
  463. 					}
  464. 					//绘制直线
  465. 					var X0,Y0,X1,Y1;
  466. 					X0= Math.round(-x0)*30;
  467. 					Y0=-Math.round(y0)*30;
  468. 					X1=Math.round(-x1)*30;
  469. 					Y1=-Math.round(y1)*30;
  470. 					context.beginPath();
  471. 					context.strokeStyle="#2FB9D6";
  472. 					context.moveTo(X0,Y0);
  473. 					context.lineTo(X1,Y1);
  474. 					context.closePath();
  475. 					context.stroke();
  477. 					canvas_flag=1;//标记变量置1
  478. 				}
  479. 			}
  481. 		};
  483. 		//重新绘制
  484. 		document.getElementById("reset").onclick=function reset(){
  486. 			var A=document.getElementById("A").value;
  487. 			var B=document.getElementById("B").value;
  488. 			var C=document.getElementById("C").value;
  489. 			if(A.length == 0 && B.length == 0 && C.length == 0) {alert("没有输入数据！")}
  490. 			else {
  491. 				//清空input输入框
  492. 				document.getElementById("A").value="";
  493. 				document.getElementById("B").value="";
  494. 				document.getElementById("C").value="";
  495. 			}
  496. 			if(canvas_flag==1) {
  497. 				context.clearRect(-300,-300,600,600); //清空画布
  498. 				context.translate(-300,-300); //将坐标原点还原
  499. 				drowAxes(); //重绘坐标轴
  501. 				canvas_flag=0;
  502. 			}
  503. 			if(document.getElementById("xy").style.display === 'block') {
  504. 				document.getElementById("xy").style.display = 'none';
  506. 				var table = document.getElementById("table");
  507. 			    while(table.hasChildNodes()) //当table下还存在子节点时 循环继续
  508. 			    {
  509. 			        table.removeChild(table.firstChild);
  510. 			    }
  511. 			}
  512. 		};
  514. 	    </script>
  515.         </body>
  516.         </html>

利用canvas实现的中点Bresenham算法的更多相关文章

  1. 《图形学》实验七：中点Bresenham算法画椭圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画椭圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 50 ...

  2. 《图形学》实验六：中点Bresenham算法画圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...

  3. 《图形学》实验四：中点Bresenham算法画直线

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h& ...

  4. Python使用DDA算法和中点Bresenham算法画直线

    title: "Python使用DDA算法和中点Bresenham算法画直线" date: 2018-06-11T19:28:02+08:00 tags: ["图形学&q ...

  5. [DEBUG]椭圆的中点Bresenham算法边缘绘制出现错误

    在使用椭圆的中点Bresenham算法绘制椭圆时, 当椭圆足够大时, 椭圆的边缘会出现下面这种情况. 出错原因: 将a, b声明为了int类型, 导致中点判别式中发生溢出 关注后面的a*b*a*b当a ...

  6. 《图形学》实验五：改进的Bresenham算法画直线

    开发环境: VC++6.0,OpenGL 实验内容: 使用改进的Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h ...

  7. 直线的中点Bresenham算法的实现

    一.实验目的 1.掌握在MFC中搭建图形绘制的基本框架的方法: 2.将直线的中点Bresenham算法转化成可执行代码. 二.实验内容 1. 通过分析具体数据在中点Bresenham算法上的执行过程, ...

  8. Bresenham算法画填充圆及SDL代码实现

    画圆是计算机图形操作中一个非常重要的需求.普通的画圆算法需要大量的浮点数参与运算,而众所周知,浮点数的运算速度远低于整形数.而最终屏幕上影射的像素的坐标均为整形,不可能是连续的线,所以浮点数运算其实纯 ...

  9. 基于Bresenham算法画圆

    bresenham算法画圆思想与上篇 bresenham算法画线段 思想是一致的 画圆x^2+y^2=R^2 将他分为8个部分,如上图 1. 只要画出1中1/8圆的圆周,剩下的就可以通过对称关系画出这 ...

随机推荐

  1. 【jmeter】参数化User Defined Variables与User Parameters

    偶然发现JMeter中有两个元件(User Defined Variables与User Parameters)很相近,刚开始时我也没注意,两者有什么不同.使用时却发现两者使用场景有些不同,现在小结一 ...

  2. JavaScript中的继承模式总结

    一.总结: //js中的几种继承 //原型链的问题,包含引用类型的原型属性会被实例共享,子类型无法给超类型传递参数 function SuperType() { this.colors = [&quo ...

  3. C基础--关于typedef的用法总结

    转自:http://blog.csdn.net/wangqiulin123456/article/details/8284939 在C还是C++代码中,typedef都使用的很多,在C代码中尤其是多. ...

  4. Cpk

    CPK:Complex Process Capability index 的缩写,是现代企业用于表示制程能力的指标.制程能力是过程性能的允许最大变化范围与过程的正常偏差的比值.制程能力研究在於确认这些 ...

  5. 不用配置tnsnames.ora,直接通过PL/SQL访问远程数据库

  6. PLSQL_性能优化工具系列09_SQL Plan Management

    2014-09-24 Created By BaoXinjian

  7. cf519D . A and B and Interesting Substrings 数据结构map

    题意: 已知26个小写字母有各自的权值(正,负,或0) 现在给出一个字符串,长度<=1e5 问这个字符串有多少个子串满足: 开头的字母和结尾的字母一样 字符串除了开头和结尾的字母外,其余的字母的 ...

  8. Yii 框架表单验证---实例

  9. memcached完全剖析–1. memcached的基础

    系列文章导航: memcached完全剖析–1. memcached的基础 memcached全面剖析–2. 理解memcached的内存存储 memcached全面剖析–3. memcached的删 ...

  10. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...