在網頁上用代碼繪製一個漸變邊框的圖形技巧

用代碼繪製一些有著固定邊框的圖形在網頁上還是比較簡單的,這裡我們就來學學,如何讓這些圖形的邊框產生一種漸變的效果,從而讓圖形更具觀賞性。

工具/原料

dreamweaver

方法/步驟

思路。繪製一個漸變的矩形可以分解成兩個部分,一個就是矩形邊框的漸變效果,另外一個就是繪製矩形這個主體任務。

我們這裡設計一種綠色的漸變效果,三種不同深度的綠色形成了這樣的一個綠色調的漸變過程。

var c=document.getElementById("漸變矩形");

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

var gradient=ctx.createLinearGradient(0,0,190,50);

gradient.addColorStop("0","#66CDAA");

gradient.addColorStop("0.5","#66CD00");

gradient.addColorStop("1.0","#556B2F");

有了漸變這樣的一個定義之後,我們再把它作用在圖形上面就非常的簡單了。

ctx.strokeStyle=gradient;

ctx.lineWidth=10;

ctx.strokeRect(40,110,210,100);

我們還可以用同樣的方法去做一個紫色邊框的效果。

用同樣的辦法,我們還可以用這個漸變的樣式使用在文字上面。strokeText()這個代碼可以達成這樣的一個功能。

<script type="text/javascript">

var c=document.getElementById("寫字也行");

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

ctx.font="60px bold";

// Create gradient

var gradient=ctx.createLinearGradient(0,0,190,50);

gradient.addColorStop("0","#6959CD");

gradient.addColorStop("0.5","#68228B");

gradient.addColorStop("1.0","#191970");

// Fill with gradient

ctx.strokeStyle=gradient;

ctx.strokeText("我在",20,80);

</script>

用簡單的辦法繪製一個可以填充顏色的矩形。

<script>

var c=document.getElementById("矩形");

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

ctx.fillRect(20,20,150,100);

</script>

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場