如何用HTML5技術(shù)畫一條二維曲線

最近項目中的設(shè)計圖上有一條曲線設(shè)計風(fēng)格，就想著能不用切圖的方法實現(xiàn)嗎？（畢竟切圖好討厭的 (≧▽≦)/ ）。就研究了一下實現(xiàn)方式。在此，給大家做一下參考。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)茂南,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

大家都知道，CSS3中border已經(jīng)可以實現(xiàn)一定的弧度。因此，就想著可以利用border的特性畫一條曲線。

1.首先我們先建一個 div 元素

2.給它一些基本樣式

最終效果：

從效果上看，這個方法實現(xiàn)的曲線過渡處不夠平滑，仍存在較大缺陷。下面就介紹兩個更加常用的方法。

在搜索實現(xiàn)方案的過程中，發(fā)現(xiàn)一個好用的 工具 ,可以用它來調(diào)試出復(fù)雜的曲線。根據(jù)設(shè)計稿的線條，很快就調(diào)試出來一個svg的路徑參數(shù)。

接著，修飾一下該曲線，就能得到我們所需要的效果了。

最終效果如圖：

發(fā)現(xiàn)Canvas真的是個好東西，可以用前端實現(xiàn)很多特效。當(dāng)然畫個曲線對于它來說，簡直小菜一碟。

這里會用到貝塞爾曲線（bezierCurve)的一些知識。該曲線會利用到四個點作為定位點，分別為頭和尾點還有兩個控制點用來控制整個曲線的形狀和曲率。具體可以參考 維基百科 上的相關(guān)介紹。

1.創(chuàng)建一個 canvas 元素

2.利用 bezierCurveTo 這個方法來畫該曲線。由于這個方法相關(guān)參數(shù)難以確定，我同樣選擇了一個 工具 來獲取所需要的具體參數(shù)數(shù)值。

至此，我們就得到了我們想要的曲線了。

How to Draw Quadratic Curves on an HTML5 Canvas

在線SVG編輯器

MDN SVG Tutorial

html5的canvas畫線問題

我已經(jīng)做過canvas方面的開發(fā)了，對html5這個新的api很了解，首先你不要在style里面設(shè)width跟height，可以告訴你最后跟你設(shè)的坐標(biāo)不一樣，這里面原因是canvas的原始設(shè)置是有固定高跟寬的，所以你光設(shè)置style的css值，會產(chǎn)生很多問題，你就不要在css里面設(shè)，直接這樣canvas width="" height="" 然后你為什么還會出現(xiàn)問題呢，你的canvas有自己的margin，所以它不是緊貼著最左上邊的，你在style里面這樣設(shè)html,body{margin=0;padding=0}#canvas{margin=0;padding=0},我估計你是在這里遇到問題了，你可以試試看

HTML5 Canvas基本繪制線條教程

HTML5 Canvas基本繪制線條教程

怎么畫線條？和現(xiàn)實中畫畫差不多：

1.移動畫筆，使畫筆移動至繪畫的開始處

2.確定第一筆的停止點

3.規(guī)劃好之后，選擇畫筆（包括畫筆的粗細(xì)和顏色等）

4.確定繪制

因為Canvas是基于狀態(tài)的繪制（很重要，后面會解釋），所以前面幾步都是在確定狀態(tài)，最后一步才會具體繪制。

1.移動畫筆(moveTo())

之前我們獲得了畫筆context，所以以此為例，給出改方法的使用實例——context.moveTo(100,100)。這句代碼的意思是移動畫筆至(100,100)這個點（單位是px）。記住，這里是以canvas畫布的左上角為笛卡爾坐標(biāo)系的原點，且y軸的正方向向下，x軸的正方向向右。

2.筆畫停點(lineTo())

同理，context.lineTo(600,600)。這句的意思是從上一筆的停止點繪制到(600,600)這里。不過要清楚，這里的moveTo()``lineTo()都只是狀態(tài)而已，是規(guī)劃，是我準(zhǔn)備要畫，還沒有開始畫，只是一個計劃而已！

3.選擇畫筆

這里我們暫且只設(shè)置一下畫筆的顏色和粗細(xì)。

context.lineWidth = 5，這句話的意思是設(shè)置畫筆(線條)的粗細(xì)為10px。

context.strokeStyle = "#AA394C"，這句話的意思是設(shè)置畫筆(線條)的顏色為玫紅色。

因為Canvas是基于狀態(tài)的繪制，所以我們在選擇畫筆粗細(xì)和顏色的同時，其實也是選擇了線條的粗細(xì)和顏色。

4.確定繪制

確定繪制只有兩種方法，fill()和stroke()，有點繪畫基礎(chǔ)的應(yīng)該知道，前者是指填充，后者是指描邊。因為我們只是繪制線條，所以只要描邊就可以了。調(diào)用代碼context.stroke()即可。

畫一個線條

不就一條線段嗎！廢話了這么多！那我們就開始畫吧。

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

運行結(jié)果：

我還標(biāo)注了一個頁面解析圖，供大家參考。

這里我將原本

標(biāo)簽中的width和height去掉了，但在JavaScript代碼中設(shè)置了canvas對象的width和height的屬性。

小結(jié)：要設(shè)置畫布的大小，只有這兩種方法

1.在標(biāo)簽中設(shè)置；

2.在JS代碼中設(shè)置canvas的'屬性.

怎么樣，是不是非常的酷。接下來我們要加快腳步了，繪制一個多線條組成的圖形。是不是感覺自己離藝術(shù)家又進了一步呢？別看這只是簡簡單單的一條線段，這一畫只是我們的一小步，但卻是人類的一大步！

繪制折線

上面我們已經(jīng)成功繪制了一條線段。那么，如果我要繪制有兩個筆畫甚至是很多筆畫的折線怎么辦呢？

聰明的小伙伴肯定已經(jīng)想到了，這還不簡單，復(fù)用lineTo()就可以了。下面我就獻丑隨便畫了一條優(yōu)美的折線~

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

運行結(jié)果：

繪制多條折線

那同理，我們要繪制多條樣式各不相同的折線怎么辦呢？比如我們在這里畫三條折線，分別是紅色、藍(lán)色、黑色。聰明的小伙伴肯定想到了，這還不簡單，只需要平移一下再改下畫筆顏色就行了。代碼格式都一樣的，復(fù)制就可以了。代碼如下。

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

運行結(jié)果：

咦？是不是很奇怪？說好的先紅色，再藍(lán)色，再黑色呢？怎么全是黑色了？其實，這里的原因是我之前一直強調(diào)的一點——Canvas是基于狀態(tài)的繪制。

什么意思呢？其實這段代碼每次使用stroke()時，它都會把之前設(shè)置的狀態(tài)再繪制一遍。第一次stroke()時，繪制一條紅色的折線；第二次stroke()時，會再重新繪制之前的那條紅色的折線，但是這個時候的畫筆已經(jīng)被更換成藍(lán)色的了，所以畫出的折線全是藍(lán)色的。換言之，strokeStyle屬性被覆蓋了。同理，第三次繪制的時候，畫筆顏色是最后的黑色，所以會重新繪制三條黑色的折線。所以，這里看到的三條折線，其實繪制了3次，一共繪制了6條折線。

那么，我想繪制三條折線，難道就沒有辦法了嗎？藝術(shù)家之魂到此為止了么？沒救了么？不，還有辦法。

使用beginPath()開始繪制

為了讓繪制方法不重復(fù)繪制，我們可以在每次繪制之前加上beginPath()，代表下次繪制的起始之處為beginPath()之后的代碼。我們在三次繪制之前分別加上context.beginPath()。

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

可以看到，這里得到了我們預(yù)想的結(jié)果。因為使用了beginPath()，所以這里的繪制過程如我們所想的那樣，只繪制了三次，而且每次只繪制一條折線。beginPath()是繪制設(shè)置狀態(tài)的起始點，它之后代碼設(shè)置的繪制狀態(tài)的作用域結(jié)束于繪制方法stroke()、fill()或者closePath()，至于closePath()之后會講到。

所以我們每次開始繪制前都務(wù)必要使用beginPath()，為了代碼的完整性，建議大家在每次繪制結(jié)束后使用closePath()。 ;

如何在HTML中畫一條線

需要準(zhǔn)備的材料分別有：電腦、chrome瀏覽器、html編輯器。

1、首先打開html編輯器，新建一個html文件，例如：index.html。

2、其次，在index.html的body標(biāo)簽中，添加代碼：hr/。

3、瀏覽器運行index.html頁面，此時成功在html中畫了一條線。

網(wǎng)站題目：html5畫線,html 線
網(wǎng)頁URL：http://chinadenli.net/article39/dsiepsh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、外貿(mào)建站、搜索引擎優(yōu)化、網(wǎng)站收錄、用戶體驗、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)