首页 技术 正文

利用canvas实现的中点Bresenham算法

技术 2022年11月12日
0 收藏 968 点赞 3,910 浏览 8845 个字

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="UTF-8">
<title>中点Bresenham算法</title>
<style>
    * {
    margin: 0;
    padding: 0;
    }
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
        color: #555;
    }
.left {
float: left;
margin: 20px 0 0 calc((100% - 401px - 602px)/2);
width: 400px;
height: 600px;
border: 1px solid #cccccc;
border-right: none;
}
.left header {
margin: 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 60px;
line-height: 60px;
font-size: 18px;
/*text-align: center;*/
border-bottom: 2px solid #aaa;
}
.start {
margin: 0 25px;
line-height: 80px;
/*text-align: center;*/
}
.left input[type="text"] {
padding: 2px 5px;
width: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #f5f5f5;
border: 1px solid #cccccc;
}
button {
border: none;
display: inline-block;
outline: 0;
padding: 6px 16px;
margin-bottom: 10px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: #fff;
background-color: #F88E8B;
text-align: center;
transition: .2s ease-out;
cursor: pointer;
white-space: nowrap;
box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
}
button:hover {
background-color: #F35F5C;
}
#stroke {
margin-left: 25px;
}
#reset {
margin-left: 10px;
}
/*.left button {
display: block;
margin: 0 auto;
}*/
#xy {
/*display: none;*/
}
.left p {
line-height: 40px;
text-align: center;
}
.table {
position: relative;
padding-top: 30px;
max-height: 373px;
overflow-y: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#thead {
position: absolute;
z-index: 999;
width: 370px;
margin-left: 10px;
}
.left table {
margin: 0 0 10px 10px;
width: 370px;
border-collapse:collapse;
}
.left table th{
width: 33.3333%;
height: 30px;
border: 1px solid #cccccc;
background-color: #f1f1f1;
}
.left table td{
width: 33.3333%;
height: 30px;
text-align: center;
border: 1px solid #cccccc;
}
#myCanvas {
display: block;
float: left;
margin-top: 20px;
background-color: #fffdf6;
border: 1px solid #cccccc;
}
</style>
    </head>
    <body>
<div class="left" id="left">
<header>&nbsp;&nbsp;中点 <strong>Bresenham</strong> 算法</header>
<div class="start">
直线方程 :
<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
</div>
<button id="stroke">开始绘制</button>
<button id="reset">重置</button><div id="xy" style="display: none;">
<p><strong>坐标值</strong></p>
<table id="thead">
<tr>
<th> X </th>
<th> Y </th>
<th> d </th>
</tr>
</table>
<div class="table">
<table id="table">
<!-- <tr>
<th> X </th>
<th> Y </th>
<th> d </th>
</tr> -->
</table>
</div>
</div></div>
<canvas id="myCanvas" width="600" height="600">
您的浏览器不支持canvas，请升级浏览器！
</canvas><script>//*-----------------canvas画坐标表格---------------------*
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");function drowAxes() {
// 描绘边框
var grid_cols = 20;
var grid_rows = 20;
var cell_height = canvas.height / grid_rows;
var cell_width = canvas.width / grid_cols;
context.lineWidth = 1;
context.strokeStyle = "#cccccc";// 结束边框描绘
context.beginPath();
// 准备画横线
for (var col = 1; col <= grid_cols; col++) {
  var x = col * cell_width;
  if(col == 10) {
  context.beginPath();
  context.strokeStyle = "#2FB9D6";
  context.moveTo(x+0.5,0);
  context.lineTo(x+0.5,canvas.height);
  context.stroke();
  }
  else {
  context.beginPath();
  context.strokeStyle = "#cccccc";
  context.moveTo(x+0.5,0);
  context.lineTo(x+0.5,canvas.height);
  context.stroke();
  }
}
//准备画竖线
for(var row = 1; row <= grid_rows; row++){
  var y = row * cell_height;
  if(row == 10) {
  context.beginPath();
  context.strokeStyle = "#2FB9D6";
  context.moveTo(0,y+0.5);
  context.lineTo(canvas.width, y+0.5);
  context.stroke();
  }
  else {
  context.beginPath();
  context.strokeStyle = "#cccccc";
  context.moveTo(0,y+0.5);
    context.lineTo(canvas.width, y+0.5);
  context.stroke();
  }
}
context.stroke();//给坐标轴加刻度
for(var i=0;i <= grid_cols;i++) {
var x = i * cell_width;
context.font="13px Arial";
context.fillStyle="#000";
context.fillText(-10+i,5 + x,315);
}
for(var i=0;i <= grid_rows;i++) {
var y = i * cell_height;
context.font="13px Arial";
context.fillStyle="#000";
context.fillText(10-i,305,15 + y);
}
}//坐标生成及Canvas画点函数
function drawDot(x,y,d) {
var tr=document.createElement("tr");
var td1=document.createElement("td");
var node1=document.createTextNode(" "+Math.round(x)+" ");
td1.appendChild(node1);
tr.appendChild(td1);var td2=document.createElement("td");
var node2=document.createTextNode(" "+Math.round(y)+" ");
td2.appendChild(node2);
tr.appendChild(td2);var td3=document.createElement("td");
var node3=document.createTextNode(" "+d.toFixed(2)+" ");
td3.appendChild(node3);
tr.appendChild(td3);document.getElementById("table").appendChild(tr);//坐标处理
var X,Y;
X= Math.round(x)*30;
Y=- Math.round(y)*30;
//表格中绘制坐标点
context.fillStyle="#2FB9D6";
context.beginPath();
context.arc(X,Y,4,0,Math.PI*2,true);
context.closePath();
context.fill();
}    //判断输入的字符是否为整数
    function IsInteger()
    {
            var str1 = document.getElementById('A').value.trim();
            var str2 = document.getElementById('B').value.trim();
            var str3 = document.getElementById('C').value.trim();
            if(str1.length!=0 && str2.length!=0 && str3.length!=0){
            reg=/^[-+]?\d*$/;
            if(!reg.test(str1) || !reg.test(str2) || !reg.test(str3)){
                alert("对不起，请输入整数!");//请将“整数类型”要换成你要验证的那个属性名称！
                return false;
            }
            else {return true;}
            }
    } window.onload = drowAxes();
var canvas_flag=0;//设置是否画线的标记变量//*-----------------中点Bresenham算法求坐标--------------------*
document.getElementById("stroke").onclick=function Bresenham(){
var xy=document.getElementById("xy");var A=document.getElementById("A").value;
var B=document.getElementById("B").value;
var C=document.getElementById("C").value;if(A.length == 0 || B.length == 0 || C.length == 0) {alert("请填写直线方程的系数！")}
//直线上取两个点
if(xy.style.display === 'none' && A.length != 0 && B.length != 0 && C.length != 0 && IsInteger()) {
if(A==0 && B==0 && C!=0) {alert("输入错误，请重新输入！");}
else if(A==0 && B==0 && C==0) {alert("输入数据不能全部为0！")}
else if(A==0 && B!=0) { //y=c 类方程
context.translate(300,300);//将坐标原点移到（300,300）处//绘制直线
var c=-Math.round(C/B)*30;
context.beginPath();
context.strokeStyle="#2FB9D6";
context.moveTo(-300,c);
context.lineTo(300,c);
context.closePath();
context.stroke();canvas_flag=1;//标记变量置1}
else if(A!=0 && B==0) { //x=c 类方程
context.translate(300,300);//将坐标原点移到（300,300）处//绘制直线
var c=-Math.round(C/A)*30;
context.beginPath();
context.strokeStyle="#2FB9D6";
context.moveTo(c,-300);
context.lineTo(c,300);
context.closePath();
context.stroke();canvas_flag=1;//标记变量置1}
else if(-A/B>=0){  //斜率大于等于0的情况
xy.style.display = 'block';
var x0,y0,x1,y1;
var vx,vy;
var d; //增长量
var m,n; //循环变量
var x,y;var k = -A/B;
if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
x0 = -5;x1 = 5;
y0 = (-C -A*x0)/B;
y1 = (-C -A*x1)/B;
vx = x1 - x0,vy = y1 - y0;
x = x0,y = y0;
n = x0;
m = x1;
d = vx - 2*vy; //初始化d
}
else if(k>1) { //k大于1的情况
y0 = -5;y1 = 5;
x0 = (-C -B*y0)/A;
x1 = (-C -B*y1)/A;
vx = x1 - x0,vy = y1 - y0;
x = x0,y = y0;
n = y0;
m = y1;
d = 2*vx - vy; //初始化d
}
context.translate(300,300);//将坐标原点移到（300,300）处
for(var i=n;i<=m;i++) {//----------------算法核心代码---------------
if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
drawDot(x,y,d);
if(d<0) {
x = x + 1;
y = y + 1;
d = d + 2*vx - 2*vy;
}
else {
x = x + 1;
y = y;
d = d - 2*vy;
}
}
else if(k>1) { //k大于1的情况
drawDot(x,y,d);
if(d<0) {
x = x;
y = y + 1;
d = d + 2*vx;
}
else {
x = x + 1;
y = y + 1;
d = d - 2*vy + 2*vx;
}
}}
//绘制直线
var X0,Y0,X1,Y1;
X0= Math.round(x0)*30;
Y0=-Math.round(y0)*30;
X1=Math.round(x1)*30;
Y1=-Math.round(y1)*30;
context.beginPath();
context.strokeStyle="#2FB9D6";
context.moveTo(X0,Y0);
context.lineTo(X1,Y1);
context.closePath();
context.stroke();canvas_flag=1;//标记变量置1
}
else if(-A/B<0){ //斜率小于0的情况
//将直线转化为斜率大于等于0的情况，然后求关于x轴对称的直线就行
xy.style.display = 'block';
A = -A;
var x0,y0,x1,y1;
var vx,vy;
var d; //增长量
var m,n; //循环变量
var x,y;var k = -A/B;
if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
x0 = -5;x1 = 5;
y0 = (-C -A*x0)/B;
y1 = (-C -A*x1)/B;
vx = x1 - x0,vy = y1 - y0;
x = x0,y = y0;
n = x0;
m = x1;
d = vx - 2*vy; //初始化d
}
else if(k>1) { //k大于1的情况
y0 = -5;y1 = 5;
x0 = (-C -B*y0)/A;
x1 = (-C -B*y1)/A;
vx = x1 - x0,vy = y1 - y0;
x = x0,y = y0;
n = y0;
m = y1;
d = 2*vx - vy; //初始化d
}
context.translate(300,300);//将坐标原点移到（300,300）处
for(var i=n;i<=m;i++) {//----------------算法核心代码---------------
if(k>=0 && k<=1) { //k大于等于0小于等于1的情况
drawDot(-x,y,d);
if(d<0) {
x = x + 1;
y = y + 1;
d = d + 2*vx - 2*vy;
}
else {
x = x + 1;
y = y;
d = d - 2*vy;
}
}
else if(k>1) { //k大于1的情况
drawDot(-x,y,d);
if(d<0) {
x = x;
y = y + 1;
d = d + 2*vx;
}
else {
x = x + 1;
y = y + 1;
d = d - 2*vy + 2*vx;
}
}}
//绘制直线
var X0,Y0,X1,Y1;
X0= Math.round(-x0)*30;
Y0=-Math.round(y0)*30;
X1=Math.round(-x1)*30;
Y1=-Math.round(y1)*30;
context.beginPath();
context.strokeStyle="#2FB9D6";
context.moveTo(X0,Y0);
context.lineTo(X1,Y1);
context.closePath();
context.stroke();canvas_flag=1;//标记变量置1
}
}};//重新绘制
document.getElementById("reset").onclick=function reset(){var A=document.getElementById("A").value;
var B=document.getElementById("B").value;
var C=document.getElementById("C").value;
if(A.length == 0 && B.length == 0 && C.length == 0) {alert("没有输入数据！")}
else {
//清空input输入框
document.getElementById("A").value="";
document.getElementById("B").value="";
document.getElementById("C").value="";
}
if(canvas_flag==1) {
context.clearRect(-300,-300,600,600); //清空画布
context.translate(-300,-300); //将坐标原点还原
drowAxes(); //重绘坐标轴canvas_flag=0;
}
if(document.getElementById("xy").style.display === 'block') {
document.getElementById("xy").style.display = 'none';var table = document.getElementById("table");
    while(table.hasChildNodes()) //当table下还存在子节点时 循环继续
    {
        table.removeChild(table.firstChild);
    }
}
};    </script>
        </body>
        </html>
点赞 968

贡献者

上一篇： 怎样对CODESOFT中的条形码进行黑白转换
下一篇： 蓄水池采样算法（Reservoir Sampling）
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：9,085
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,560
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,819
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,902
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
68
收藏
0
人气
236,056
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页