Bresenham畫線算法及實踐

據直線的一般表示形式y=mx+b我們可以很容易得出經過兩點p0(x0,y0)、p1(x1,y1)的直接方程為

稍作變換表示成函數的形式如下

顯示屏幕是由如下圖所示一個個微小的像素組成的，屏幕坐標是離散的，繪制一條線段實際上就是設置一系列像素的顏色來近似模擬一條直線，Bresenham方式是一種采用中點算法來實現直線繪制的方法。

這里以直線斜率在(0,1]區間的情況為例來介紹Bresenham算法的核心內容，斜率在此區間內x軸的增長要快于y軸的增長，因此我們直接遍歷x0~x1之間的像素（像素坐標都是整數），關鍵步驟就是確定x對應的y軸像素值。

假如已經繪制了像素(x,y)，下一步就是確定是繪制(x+1,y+1)還是(x+1,y)，Bresenham算法采用計算直線方程的函數形式的值f(x+1, y+0.5)，也就是y+1和y的中點來進行判別。

如果f(x+1, y+0.5)>0說明直線在y+1和y中點的下方，此時繪制(x+1,y)比較合理；
如果f(x+1, y+0.5)<0說明直線在y+1和y中點的上方，此時繪制(x+1,y+1)比較合理；
如果f(x+1, y+0.5)=0說明直線剛好穿過y+1和y中點，此時繪制那一個都是可以的；
表示為偽代碼的形式為：

y=y0
for x=x0 to x1 do
	draw(x,y)
	if f(x+1, y+0.5) < 0 then
		y=y + 1

其他斜率曲線的判斷方法是類似的，需注意的是如果y的變化快于x的變化，需要遍歷y0到y1，通過中點算法來確定x的值。另外需要特別注意的就是直接方程f(x,y)的值大于0還是小于0的判斷要仔細判別，這里判斷方法并不是復雜，只是比較容易混淆。

x、y象限內直線斜率可以換分為(-∞,-1]、(-1,0]、(0,1]、(1,+∞)四個區間，見下圖。

最后，我們用html的canvas元素來演示Bresenham畫線算法，理解了該算法的原理，代碼也就順理成章了。示例繪制了四個斜率的線段，效果如下，可以看到某些斜率下的鋸齒效果還是非常明顯的，后續會繼續介紹如何利用抗鋸齒算法來生成更平滑的直線。

注：canvas的y軸正向是向下的。
index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bresenham畫線算法示例</title>

</head>

<body>

    <canvas id="canvas" width="780" height="780"></canvas>

    <script src="./bresenham.js"></script>

</body>

</html>

bresenham.js

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

  

function setPixel(x, y, color='rgba(255, 255, 255, 1.0)') {

    ctx.fillStyle=color;

    ctx.fillRect(x, y, 1, 1);

}

  

function  drawLine(p0, p1, color='rgba(255, 255, 255, 1.0)') {

    let x0, y0, x1, y1;

    // 保持x1>=x0

    if (p0.x > p1.x) {

        [x0, y0]=[Math.round(p1.x), Math.round(p1.y)];

        [x1, y1]=[Math.round(p0.x), Math.round(p0.y)];

    } else {

        [x0, y0]=[Math.round(p0.x), Math.round(p0.y)];

        [x1, y1]=[Math.round(p1.x), Math.round(p1.y)];

    }

    let m=(y1-y0)/(x1-x0);

    // 直線方程

    let f=(x,y)=> (y0-y1)*x + (x1-x0)*y + x0*y1 - x1*y0;

    // 區間(0,1]

    if (m > 0 && m <=1) {

        let y=y0;

        for (let x=x0; x < x1; x++) {

            this.setPixel(x, y, color);

            if (f(x+1, y+0.5) < 0) {

                y +=1;

            }

        }

    }

    // 區間(1,正無窮)

    else if (m > 1) {

        let x=x0;

        for (let y=y0; y < y1; y++) {

            this.setPixel(x, y, color);

            if (f(x+0.5, y+1) > 0) {

                x +=1;

            }

        }

    }

    // 區間(-1,0]

    else if (m > -1 && m <=0) {

        let y=y0;

        for (let x=x0; x < x1; x++) {

            this.setPixel(x, y, color);

            if (f(x+1, y-0.5) > 0) {

                y -=1;

            }

        }

    }

    // 區間(負無窮,-1]

    else if (m <=-1) {

        let x=x0;

        for (let y=y0; y > y1; y--) {

            this.setPixel(x, y, color);

            if (f(x+0.5, y-1) < 0) {

                x +=1;

            }

        }

    }

}

// (1,+∞)

drawLine({x: 300, y: 590}, {x: 480, y: 190}, 'rgba(255, 0, 0, 1.0)');  

// (-1,0]

drawLine({x: 300, y: 400}, {x: 480, y: 380}, 'rgba(255, 255, 0, 1.0)');

// (0,1]

drawLine({x: 300, y: 380}, {x: 480, y: 400}, 'rgba(0, 0, 255, 1.0)');  

// (-∞,-1]

drawLine({x: 300, y: 190}, {x: 480, y: 590}, 'rgba(0, 255, 0, 1.0)');

參考文獻

[1]. 《fundamentals of computer graphics》9.1.1 line drawing, p179.

1）字體的屬性

font 屬性
font-family 屬性
font-size 屬性
font-weight 屬性
font-style 屬性

字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：

屬性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一個聲明中設置所有的字體屬性
font-family	字體名稱、inherit	設置字體類型
font-size	xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit	設置字體大小
font-weight	normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	設置字體粗細
font-style	normal、italic、oblique、inherit	設置字體風格

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        font-size: 20px;
        font-family: 隸書;
        line-height: 28px;
      }
      span {
        font: italic 16px 華文彩云;
      }
    </style>
  </head>
  <body>
    <h3>Web 前端技術</h3>
    <span
      >在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
      系統，就必須掌握 Web 前端技術。</span
    >
  </body>
</html>

顯示為，

（2）CSS 中鏈接標簽可用的偽類：

a:link
a:hover
a:active
a:visited

CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。

鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。

狀態	效果
a:link	普通的、未被訪問的鏈接。
a:hover	鼠標指針位于鏈接的上方。
a:active	鏈接被單擊的時刻。
a:visited	用戶已訪問的鏈接。

針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。

狀態	顏色	背景色	文本修飾
未訪問	藍色	無	無下畫線
鼠標移到	黑色	#DDDDDD	下畫線
正單擊	紅色	#AAAAAA	刪除線
已訪問	綠色	無	無下畫線

對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">這是一個鏈接</a>
  </body>
</html>

顯示為，

為什么要按照這樣的順序來使用呢？調整幾個偽類的順序，看看會發生什么。

我們把 a:link 放到最后，效果如下：

從圖中可以發現其中的樣式屬性都被覆蓋了。

（3）列表相關的樣式屬性：

list-style 屬性
list-style-image 屬性
list-style-position 屬性
list-style-type 屬性

屬性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一個聲明中設置所有的列表屬性
list-style-image	URL、none	設置圖像為列表項標志
list-style-position	inside、outside、inherit	設置列表中列表項標志的位置
list-style-type	disc（默認）、circle、square、decimal 等	設置列表項標志的類型

例子，

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

ext-decoration屬性介紹#

text-decoration屬性是用來設置文本修飾線呢，text-decoration屬性一共有4個值。

text-decoration屬性值說明表#

值作用none去掉文本修飾線underline設置下劃線overline設置上劃線line-through設置刪除線

HTML標簽自帶修飾線#

在開始實踐text-decoration屬性之前，筆者先給大家普及下HTML中的標簽自帶修飾線如：u標簽、s標簽，若有不全大家可以在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,希望和大家相互交流，互幫互助，共同進步。

u標簽#

下面讓我們進入u標簽的實踐，u標簽自帶的是文本下劃線。
代碼塊

Copy<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>設置文本修飾線</title>
 
</head>
<body>
 <u>成功不是擊敗別人，而是改變自己</u>
</body>
</html>

結果圖

在線咨詢

上一篇：html5的一些基礎
下一篇：html屬性值可以不用引號嗎，實例驗證

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Bresenham畫線算法及實踐

參考文獻

您的項目需求