HTML5線條互相連接，如下圖！

圖片有點(diǎn)小，看不太清楚

創(chuàng)新互聯(lián)公司是一家專業(yè)提供象州企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為象州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

文字顏色與下劃線顏色不一致，說(shuō)明不是text-decoration:underline;來(lái)寫(xiě)的，應(yīng)該是劃了一條線，然后相對(duì)右邊的文字框定位；

下劃線鏈接著兩個(gè)文字框的兩條斜線，應(yīng)該是畫(huà)的兩條斜線，相對(duì)于文字框定位；

綜上所述：

1，線條是畫(huà)出來(lái)使用相對(duì)定位的；

2，線條有多種畫(huà)法，比如一個(gè)width=1px的div，然后css旋轉(zhuǎn)；或者使用png圖片；或者h(yuǎn)tml5的canvas等

html5 三角形的線條怎么寫(xiě)

使用canvas 標(biāo)簽

但是canvas只是圖形容器，您必須使用腳本來(lái)繪制圖形

使用CANVAS繪制矩形

canvas id="myCanvas"/canvas

script type="text/javascript"

var canvas=document.getElementById('myCanvas');

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

ctx.fillStyle='#00ff00';

ctx.fillRect(0,0,90,100);

/script

下面教大家畫(huà)條直線，代碼注釋很詳細(xì)不再多說(shuō)。

canvas id="canvas"/canvas

script type="text/javascript"

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

//設(shè)置繪圖環(huán)境

var cxt=canvas.getContext('2d');

//開(kāi)啟新路近

cxt.beginPath();

// 設(shè)置筆觸的寬度

cxt.lineWidth=2;

//設(shè)置筆觸的顏色

cxt.strokeStyle="#ff0000";

//設(shè)定筆觸的位置

cxt.moveTo(20,20);

//設(shè)置移動(dòng)的位置

cxt.lineTo(200,20);

//畫(huà)線

cxt.stroke();//這個(gè)時(shí)候的線已經(jīng)出來(lái)了

//關(guān)閉路徑

cxt.closePath();

//凡事路徑圖形必須先開(kāi)始路徑,畫(huà)完之后必須結(jié)束路徑

/script

下邊代碼是畫(huà)三角形，分空心和實(shí)心兩種實(shí)現(xiàn)。

canvas id="canvas1" width="300" height="300" style="background-color: yellow;"/canvas

script type="text/javascript"

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

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

cxt.beginPath();

cxt.moveTo(100,50);

cxt.lineTo(50,200);

cxt.lineTo(150,200);

cxt.closePath();//填充或閉合 需要先閉合路徑才能畫(huà)

//空心三角形

cxt.strokeStyle="red";

cxt.stroke();

//實(shí)心三角形

cxt.beginPath();

cxt.moveTo(250,50);

cxt.lineTo(200,200);

cxt.lineTo(300,200);

cxt.closePath();

cxt.fill();

/script

HTML5畫(huà)布清理，重繪，舊的線條也會(huì)出現(xiàn)

test和test2都需要重啟一個(gè)路徑，不然還是原來(lái)的，路徑信息會(huì)先保存在內(nèi)存里面，在調(diào)用stroke或者fill的時(shí)候，才會(huì)真正的繪制出來(lái)。因此，這兩個(gè)方法都加上beginPath和closePath就行了，即

function?test(){

cxt.beginPath();

cxt.moveTo(0,0);

cxt.lineTo(100,100);

cxt.stroke();

cxt.closePath();

}

note. 一般修改canvas屬性的時(shí)候，如fillStyle，先要save，繪制完成后再restore還原到初始狀態(tài)，不然會(huì)影響到下一次的繪制。

HTML5 canvas lineTO()方法如何在同一個(gè)畫(huà)布畫(huà)不同粗細(xì)的，顏色的線條出來(lái)

是這樣的，建議在同一畫(huà)布上繪制不同模塊時(shí)，記得使用?beiginPath()和closePath()框選起來(lái)，在里面使用stroke.style可以畫(huà)不同顏色的東西

script?

window.onload=function(){

var myCarvas=document.getElementById('my-carvas')//mycarvas畫(huà)布的id

var ctx=myCarvas.getContext('2d');

//繪制矩形

ctx.beginPath();

ctx.fillStyle='#ff0000';//填充顏色

ctx.fillRect(5,5,100,100);//填充矩形 X Y width height

ctx.strokeStyle='blue';//邊框顏色

ctx.lineWidth='5';//邊框?qū)挾?/p>

ctx.strokeRect(5,5,100,100)//邊框起點(diǎn)X,Y? width height

ctx.closePath();

//基礎(chǔ)線條

ctx.beginPath();

ctx.lineTo(150,150)

ctx.lineTo(250,150)

ctx.lineTo(200,250)

ctx.strokeStyle='darkgreen';

ctx.closePath();

ctx.stroke();

}

/script

效果如下，（背景顏色是另外的樣式）

HTML5 Canvas基本繪制線條教程

HTML5 Canvas基本繪制線條教程

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

1.移動(dòng)畫(huà)筆，使畫(huà)筆移動(dòng)至繪畫(huà)的開(kāi)始處

2.確定第一筆的停止點(diǎn)

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

4.確定繪制

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

1.移動(dòng)畫(huà)筆(moveTo())

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

2.筆畫(huà)停點(diǎn)(lineTo())

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

3.選擇畫(huà)筆

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

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

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

因?yàn)镃anvas是基于狀態(tài)的繪制，所以我們?cè)谶x擇畫(huà)筆粗細(xì)和顏色的同時(shí)，其實(shí)也是選擇了線條的粗細(xì)和顏色。

4.確定繪制

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

畫(huà)一個(gè)線條

不就一條線段嗎！廢話了這么多！那我們就開(kāi)始畫(huà)吧。

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

運(yùn)行結(jié)果：

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

這里我將原本

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

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

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

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

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

繪制折線

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

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

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

運(yùn)行結(jié)果：

繪制多條折線

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

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

運(yùn)行結(jié)果：

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

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

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

使用beginPath()開(kāi)始繪制

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

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

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

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

如何在 HTML5 畫(huà)布上繪圖

步驟 1: 在 HTML 中設(shè)置畫(huà)布，創(chuàng)建一個(gè)引用，并獲取上下文對(duì)象

畫(huà)布在 HTML 中通過(guò) canvas 標(biāo)簽定義。與其他標(biāo)簽類(lèi)似，canvas 的屬性（如寬度和高度）作為特性輸入。假設(shè)你希望創(chuàng)建一個(gè)寬 500 像素、高 500 像素的畫(huà)布，并將其命名為“can1”，稍后在 JavaScript 中引用它時(shí)將用到。

在 HTML 文檔中輸入 canvas 標(biāo)簽。

canvas?id="can1"?width="500"?height="500"/canvas

在 JavaScript 文檔中，創(chuàng)建一個(gè)變量，在編寫(xiě)腳本時(shí)該變量將代替“can1”。這里，我們將該變量命名為“myCanvas”，并使用?getElementById?將其鏈接到“can1”。

var?myCanvas?=?document.getElementById("can1");

畫(huà)布的?CanvasRenderingContext2D?對(duì)象具有操作畫(huà)布的所有命令。 這里，在上下文對(duì)象中檢索“can1”。將此變量稱為“myContext”。

var?myContext?=?myCanvas.getContext("2d");

步驟 2: 繪制矩形、直線、貝塞爾曲線、圓和形狀

在畫(huà)布上繪制簡(jiǎn)單的線條非常容易。使用 JavaScript 的?moveTo?方法可設(shè)置線條開(kāi)始位置的坐標(biāo)。然后只需使用另一方法設(shè)置終點(diǎn)。 第二步可以使用若干方法，每種方法專用于幫助呈現(xiàn)一種不同的線型，無(wú)論是直線、貝塞爾曲線還是圓弧。若要將線條合并為形狀，可以閉合對(duì)?beginPath?和?closePath?方法調(diào)用中的線條。在指定所需的外觀之后，可以使用?fill?方法應(yīng)用顏色，并使用?stroke?方法執(zhí)行線條和形狀的呈現(xiàn)。

應(yīng)用一些基本風(fēng)格。這里，通過(guò)使用?fillStyle?屬性繪制一個(gè)黑色矩形，將畫(huà)布背景設(shè)置為黑色 (#000)。然后使用?strokeStyle?屬性將線條顏色設(shè)置為白色 (#fff)，使用?fillRect?方法應(yīng)用黑色背景，并使用?lineWidth?屬性將線條的粗細(xì)設(shè)置為 3 個(gè)像素。

//?Specify?a?black?background,?and?white?lines?that?are?3?pixels?thick.

myContext.fillStyle???=?'#000';

myContext.strokeStyle?=?'#fff';

myContext.fillRect(0,0,500,500);

myContext.lineWidth??=?3;myContext.fill();

在后續(xù)步驟中，將在這個(gè) 500×500 的黑色畫(huà)布上繼續(xù)構(gòu)建。

現(xiàn)在，準(zhǔn)備在畫(huà)布的黑色表面繪制一個(gè)白色線條。先從直線開(kāi)始。

使用?moveTo?方法設(shè)置直線的起點(diǎn)，使用?lineTo?方法設(shè)置終點(diǎn)。

這些方法采用兩個(gè)數(shù)字作為參數(shù)。第一個(gè)數(shù)字表示 x 軸坐標(biāo)，或者表示此坐標(biāo)定義的自畫(huà)布左側(cè)算起的像素?cái)?shù)。第二個(gè)數(shù)字是從頂部開(kāi)始測(cè)量的 y 軸坐標(biāo)。

//?Draw?a?line?that?starts?at?the?upper?left?corner?of?the?canvas?and?ends?at?the?lower?right.?

myContext.moveTo(0,0);

myContext.lineTo(500,500);

myContext.stroke();

若要繪制二次貝塞爾曲線，請(qǐng)使用?quadraticCurveTo?方法，該方法采用兩個(gè)坐標(biāo)—曲線的一個(gè)控制點(diǎn)和一個(gè)端點(diǎn)。

//?Draw?a?swooping?curve?that?spans?the?width?of?the?canvas.

myContext.moveTo(0,0);

myContext.quadraticCurveTo(0,500,500,250);

myContext.stroke();

若要繪制三次貝塞爾曲線，請(qǐng)使用?bezierCurveTo?方法，該方法采用三個(gè)坐標(biāo)—曲線的兩個(gè)控制點(diǎn)和一個(gè)端點(diǎn)。

//?Draw?a?V-shaped?Bezier?curve?that?spans?the?entire?canvas.

myContext.moveTo(0,0);

myContext.bezierCurveTo(500,?820,?0,?500,?500,?0);

myContext.stroke();

若要?jiǎng)?chuàng)建一個(gè)圓，請(qǐng)使用?arc?方法：在設(shè)置用于繪制圓形輪廓的原點(diǎn)時(shí)，請(qǐng)確保將?moveTo?方法設(shè)置在沿線條路徑的位置上，否則圓上將有一條通向?moveTo坐標(biāo)的“尾巴”。

//?Draw?a?circle?that?spans?the?width?of?the?canvas.

myContext.moveTo(500,250);

myContext.arc(250,250,250,0,Math.PI*2,true);

myContext.stroke();

通過(guò)閉合對(duì)?beginPath?和?closePath?調(diào)用中的多個(gè)線條，可以從上述線條的任意組合中繪制一個(gè) 2D 形狀。然后，整個(gè)形狀可以使用?fill?接收一種顏色。前面設(shè)置的筆劃樣式將創(chuàng)建白色線條，在與應(yīng)用于主體的紅色 (#f00) 合并時(shí)，該形狀將繼承雙色調(diào)外觀。

//??Draw?a?red?diamond?that?spans?the?entire?canvas.

myContext.fillStyle?=?'#f00';

myContext.beginPath();

myContext.moveTo(250,0);

myContext.lineTo(0,250);

myContext.lineTo(250,500);

myContext.lineTo(500,250);

myContext.closePath();

myContext.fill();

步驟 3: 顯示位圖圖像

位圖圖像（如 .jpg、.png 和 .gif 文件）可以放置在畫(huà)布上，甚至可以在代碼中縮放和裁剪，不會(huì)觸及原始文件。若要添加位圖圖像，請(qǐng)指定該圖像的 URI，然后使用?drawImage?方法在畫(huà)布上指定其位置。使用可選參數(shù)可將圖像縮放到指定的大小，甚至僅顯示圖像的一個(gè)片段，這對(duì)于實(shí)現(xiàn)滾動(dòng)背景或使用子畫(huà)面表動(dòng)態(tài)顯示子畫(huà)面等操作非常有用。

若要在屏幕上繪制位圖圖像而不進(jìn)行任何修改，請(qǐng)指定要用于左上角的 x 坐標(biāo)和 y 坐標(biāo)。

//?Draw?an?image?at?the?upper?left?corner?of?the?canvas?(0,?0).

var?myImg?=?new?Image();

myImg.src?=?'myImageFile.png';

myContext.drawImage(myImg,?0,?0)

若要縮放圖像，可在末尾添加兩個(gè)數(shù)字，分別代表寬度和高度。如果有幫助，不妨將后兩個(gè)數(shù)字視為“右部”和“底部”，而不是“寬度”和“高度”。

//?Scale?the?image?to?span?the?entire?500?x?500?canvas.

var?myImg?=?new?Image();

myImg.src?=?'myImageFile.png';

myContext.drawImage(myImg,?0,?0,?500,?500)

若要僅使用圖像的一個(gè)切片，則需要定義兩個(gè)矩形區(qū)域，對(duì)?drawImage?的調(diào)用提高到 9 個(gè)參數(shù)（第一個(gè)參數(shù)是 JavaScript 圖像對(duì)象）。要傳入的前四個(gè)數(shù)字表示圖像的切片。后四個(gè)數(shù)字表示要顯示該切片的畫(huà)布區(qū)域。

//?Take?a?20?x?20?slice?from?the?upper?left?of?the?image?and?scale?it?to?span?the?entire?500?x?500?canvas.

var?myImg?=?new?Image();

myImg.src?=?'myImageFile.png';

myContext.drawImage(myImg,?0,?0,?20,?20,?0,?0,?500,?500);

步驟 4: 漸變

任何人只要熟悉在圖形設(shè)計(jì)程序中定義漸變的常見(jiàn)方式，都會(huì)喜歡使用 JavaScript 代碼定義漸變的簡(jiǎn)單性。在設(shè)計(jì)程序中是選擇顏色，漸變中的顏色位置使用水平滑塊設(shè)置。JavaScript 中的唯一區(qū)別是使用從 0 到 1 范圍內(nèi)的小數(shù)值代替滑塊。

在設(shè)計(jì)程序中，線性漸變使用線條在圖像上定位，線條的開(kāi)始和結(jié)束位置確定方向和縮放級(jí)別。在 JavaScript 中，該線條使用兩對(duì) x、y 軸坐標(biāo)繪制。然后將 4 個(gè)數(shù)字傳遞到?createLinearGradient?方法以創(chuàng)建?CanvasGradient?對(duì)象。在定義漸變對(duì)象的屬性之后，就會(huì)得到所需的漸變，CanvasGradient?作為?fillStyle?傳遞到?fillRect?方法進(jìn)行呈現(xiàn)。

//?Render?a?white,?red?and?black?gradient?diagonally?across?the?canvas.

var?myGradient?=?myContext.createLinearGradient(0,0,?500,500);?//?gradient?starts?at?upper?left?and?ends?at?lower?right

myGradient.addColorStop(0,"#fff");???//?white?at?the?beginning?of?the?gradient

myGradient.addColorStop(0.5,"#f00");//?red?in?the?middle?of?the?gradient

myGradient.addColorStop(1,"#000");??//?black?at?the?end?of?the?gradient

myContext.fillStyle?=?myGradient;???//?ensure?the?next?call?to?fillRect?will?use?the?specified?gradient

myContext.fillRect(0,0,500,500);???//?rectangle?that?contains?the?gradient?spans?the?entire?canvas

徑向漸變的定義方式稍有不同。為漸變的起點(diǎn)和終點(diǎn)繪制兩對(duì) x、y 軸坐標(biāo)—，這與線性漸變中一樣—，但每個(gè)坐標(biāo)對(duì)都有第三個(gè)與其關(guān)聯(lián)的 z 軸坐標(biāo)，用于定義半徑?？梢韵胂駷閲@一個(gè)坐標(biāo)繪制一個(gè)圓，該坐標(biāo)位于中心 (250, 250)，繪制的圓的大小以像素為單位定義。這樣定義兩個(gè)圓之后，一個(gè)圓較小，一個(gè)圓跨整個(gè)畫(huà)布，有 6 個(gè)數(shù)字傳遞到?createRadialGradient。在呈現(xiàn)時(shí)，徑向漸變?cè)趦蓚€(gè)圓之間的空間中繪制，顏色等級(jí)與圓的半徑的大小成正比。

//?Render?a?white,?red?and?black?radial?gradient?spanning?the?canvas.

var?myGradient?=?myContext.createRadialGradient(250,250,0,?250,250,500);?//?gradient?is?centered?and?spans?the?entire?canvas?

myGradient.addColorStop(0,"#fff");???//?white?at?the?beginning?of?the?gradient

myGradient.addColorStop(0.5,"#f00");??//?red?in?the?middle?of?the?gradient

myGradient.addColorStop(1,"#000");???//?black?at?the?end?of?the?gradient

myContext.fillStyle?=?myGradient;????//?ensure?the?next?call?to?fillRect?will?use?the?specified?gradient

myContext.fillRect(0,0,500,500);????//?rectangle?that?contains?the?gradient?spans?the?entire?canvas

步驟 5: 動(dòng)畫(huà)

可以使用多種方法繪制動(dòng)畫(huà)。

對(duì)于畫(huà)布內(nèi)的元素，JavaScript 提供了?setInterval?方法，該方法計(jì)劃一個(gè)重復(fù)調(diào)用的函數(shù)，每經(jīng)過(guò)定義的時(shí)間間隔便調(diào)用一次該函數(shù)。在該函數(shù)中，需要重繪畫(huà)布來(lái)反映對(duì)其上呈現(xiàn)的對(duì)象的更改。下面是一個(gè)示例，其中一個(gè)函數(shù)初始化該動(dòng)畫(huà)，將呈現(xiàn)頻率計(jì)劃為大約每秒 60 幀（每 13.33 毫秒一幀），并且重復(fù)調(diào)用該函數(shù)將重繪畫(huà)布。在本例中，徑向漸變從一個(gè)小點(diǎn)逐漸增大，直到填充整個(gè)畫(huà)布。

//?Generate?an?animation?of?a?growing?gradient.

//?These?variables?must?exist?globally?so?both?functions?can?access?them.

var?myCanvas;?

var?myContext;

var?outerBoundary?=?0,?innerBoundary?=?0;

//?Start?the?animation.

window.onload?=?initialize;

function?initialize()?{

myCanvas?=?document.getElementById("can1");

myContext?=?myCanvas.getContext("2d");

setInterval("redrawCanvas()",13);????//?redraw?@?approximately?60?frames?per?second

}????????????????????????????????????????

//?Run?the?animation.???????????????????

function?redrawCanvas()?{??????????????

if?(outerBoundary??500)?{????????????

outerBoundary++;?????????????//?grow?the?size?of?the?gradient

}?else?{?????????????????????????????

innerBoundary++;?????????????//?grow?the?size?of?the?inner?white?circle?if?red?is?maxed

}????????????????????????????????????

var?myGradient?=?myContext.createRadialGradient(250,250,innerBoundary,?250,250,outerBoundary);

myGradient.addColorStop(0,"#fff");???//?white?at?the?beginning?of?the?gradient

myGradient.addColorStop(0.5,"#f00");?//?red?in?the?middle?of?the?gradient

myGradient.addColorStop(1,"#000");???//?black?at?the?end?of?the?gradient

myContext.fillStyle?=?myGradient;????//?ensure?the?next?call?to?fillRect?will?use?the?specified?gradient

myContext.fillRect(0,0,500,500);?????//?rectangle?that?contains?the?gradient?spans?the?entire?canvas

}

CSS3 轉(zhuǎn)換和動(dòng)畫(huà)可用于轉(zhuǎn)換畫(huà)布本身和畫(huà)布外部的對(duì)象。

此外，新的 WinJS 庫(kù)有許多高度優(yōu)化的動(dòng)畫(huà)，創(chuàng)建這些動(dòng)畫(huà)是為了模擬原有 Windows 動(dòng)畫(huà)的行為。 WinJS 動(dòng)畫(huà)有助于為你的應(yīng)用 UI 提供一個(gè)高度集成的外觀。有關(guān)詳細(xì)信息，請(qǐng)參閱WinJS.UI.Animation 命名空間。

步驟 6: 更多 HTML5 畫(huà)布提示

可以使用一系列屬性（shadowColor、shadowBlur、shadowOffsetX?和?shadowOffsetY）應(yīng)用陰影。

可以使用?createPattern?方法作為一種模式重復(fù)畫(huà)布中的元素。

可以使用?save?方法保存畫(huà)布狀態(tài)，然后執(zhí)行更改，再使用?restore?方法還原以前的狀態(tài)。該方法很好用，函數(shù)甚至不需要采用參數(shù)。

可以使用?globalCompositeOperation?屬性定義兩個(gè)畫(huà)布元素重疊時(shí)會(huì)發(fā)生什么情況。 使用此屬性始終可以定義在源或新元素級(jí)別發(fā)生的情況。可以執(zhí)行的操作有顏色混合、遮蔽和更改重疊優(yōu)先級(jí)等。

注意??globalCompositeOperation?主題使用源表示新元素，使用目標(biāo)表示以前存在的元素。

可以使用?strokeText?方法將文本添加到畫(huà)布。

當(dāng)前題目：html5線條,html5線條顏色
網(wǎng)站URL：http://jinyejixie.com/article38/dssogsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、自適應(yīng)網(wǎng)站、App開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名

廣告

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