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

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

工具/原料

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>

相關文章

  1. 在網頁上用代碼繪製有陰影的多邊形

    單調的圖形讓人很容易產生厭惡的心理,而生動的圖形是促使訪問者可以有更大的耐心在網頁上面進行瀏覽,這裡我們就來說說用代碼繪製有陰影的多邊形的效果,掌握了這些技巧以後,你對於網頁元素的處理能力會更加的卓越 ...
  2. 自學HTML——在網頁上運行代碼(入門課)

    今天,在網上看到一個網頁,支持在網頁上編程.運行代碼!而且,這是個菜鳥教程,很適合初學的人! 工具/原料 電腦 網際網路 方法/步驟 這個網頁支持在線運行代碼,點擊"嘗試一下"按鈕, ...
  3. 如何在網頁上用代碼編輯圖像

    隨著網頁程式語言的進步,我們有了更多的手段來編輯網頁上的圖像,這些豐富的手段讓我們可以非常高效的對於網頁上的大量圖像與視頻進行編輯工作,從而讓網頁內容變得更加的豐富與動感. 工具/原料 dreamwe ...
  4. 用CSS代碼繪製精美雙色三角形的技巧

    CSS代碼有著很強的在網頁上繪製圖形的能力,我們可以通過這樣的代碼實現平時只有用圖片才能實現的圖形技巧.連續繪製多個顏色不同的圖形可以通過CSS代碼輕鬆的實現,這裡,我們就來展示一下連續繪製多個對比色 ...
  5. 如何繪製一個奇形怪狀的多彩圖形

    我們將彩色各種各樣的圖片圖形繪畫到一起,就可以繪製一個很漂亮的彩色圖片,下面我們來設計一個彩色的好看的多邊型吧. 工具/原料 電腦 繪圖工具 滑鼠 方法/步驟 首先我們繪畫一個大的基本框架,在這個框架 ...
  6. 如何使用Inscape設計工具繪製一個六邊圓角圖形

    在我們使用的SVG繪圖工具Inscape,可以使用基本圖形繪製沒有的多邊形,然後使用另外的圖形組合成一種新的圖形,再利用路徑和濾鏡功能設置樣式.下面利用實例說明,操作如下: 工具/原料 SVG Ins ...
  7. 使用代碼在網頁上寫一個「百」字

    我們知道網頁上面有著豐富的元素,文字就是其中的一個重要的元素,我們實現文字效果有很多的辦法,從文字的輸入到圖片都可以,但是通過代碼的使用也可以達到這樣的一種效果,在這裡,我們就來學習一下! 工具/原料 ...
  8. 用CSS代碼在網頁上繪製漂亮的三角標記

    我們用CSS代碼可以在網頁上面繪製各種的圖標標誌,漂亮的三角形標誌通過一系列的樣式聲明就可以呈現出來,這樣的特色標誌可以用在很多的地方. 工具/原料 dreamweaver 方法/步驟 案例分析:我們 ...
  9. 用代碼繪製三次貝塞爾曲線在網頁上的技巧

    對於一些複雜的網頁圖形來說,我們可以通過三次貝塞爾曲線來實現.這個三次貝塞爾曲線的繪製也是有著一定的技巧的.我們的多個不同的控制點就可以把這個三次貝塞爾曲線很精確的繪製出來. 工具/原料 dreamw ...
  10. HTML5技巧:在網頁上畫一個漸變的橢圓

    今天的網頁代碼已經非常強大了,我們這一節就來學學如何用HTML5代碼繪製比較複雜的圖形,並且讓這個圖形做一些特別的漸變效果. 工具/原料 dreamweaver 方法/步驟 SVG.我們知道在HTML ...
  11. 如何用CSS代碼在網頁上做一個電波圖的動感效果

    平實的網頁少不了各種的酷炫效果,我們要學會在網頁上面做出各種的酷炫效果,這就離不開強大的CSS代碼的幫助,這一章,我們就要學學如何讓動感的效果呈現於網頁上面. 工具/原料 dreamweaver 方法 ...
  12. 如何使用HTML5和webgl在網頁上繪製一個點

    HTML5作為最新的HTML標準,擴展了傳統HTML的特性,如二維圖形.網絡傳輸.本地數據存儲等.HTML5時代的到來使瀏覽器正在迅速地從簡單的展示工具轉變為更複雜的應用平台,人們希望網頁不僅僅由二維 ...
  13. 用CSS代碼繪製漸變標記的技巧

    網頁的效果需要多樣式的圖形來打造,不是所有的圖形都要直接置入圖片,我們可以用CSS代碼來進行設計,從而讓這些網頁效果更加的自然與容易. 工具/原料 dreamweaver 方法/步驟 案例分析:我們要 ...
  14. 如何在網頁上做一個圖片下拉菜單

    下拉菜單有很多不同的類型,我們在這一章節當中就來學學如何做一個圖片下拉菜單,只要滑鼠經過這個圖片,下拉菜單就自動呈現出來. 工具/原料 dreamweaver 方法/步驟 思路:做這樣的一個圖片式下拉 ...
  15. 如何才能在網頁上只顯示xml的內容不顯示代碼

    xml中文全名叫做擴展性標記語言.它與html語言有很多共同之處,又有很多不同之處.xml可以像html一樣在網頁中運行,並且有著自己的一套規則. 工具/原料 xml工具Aitova XMLSpy(可 ...
  16. 在網頁上怎樣看原代碼

    怎麼看一個網站的原始碼, 對於完全沒有任何代碼或是程序基礎的同學來說,從哪裡看都是一個很大問題,更別說是寫代碼了,下面我就來說下怎麼看一個網站的原始碼,網頁原始碼怎麼看. 工具/原料 電腦 Mozil ...
  17. 網頁上顯示html代碼方法

    最近學習時突然有個需求,想在網頁上顯示一段html代碼,例如 <video src="video/movie.ogg" width="320" heigh ...
  18. 怎樣用canvas在網頁上繪製圖形

    canvas 元素用於在網頁上繪製圖形. 什麼是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像. 畫布是一個矩形區域,您可以控制其每一像素. canv ...
  19. 如何在網頁上做一個自動的時間表

    我們可以通過程序在網頁上做很多不同的功能元素,時間表就是一個非常實用的元素,讓網頁自動呈現現在的時間結果,並可以不斷的進行更新. 工具/原料 dreamweaver 方法/步驟 案例分析:時間表分成三 ...
  20. html5教程:[7]canvas 元素在網頁上繪製圖形

    canvas 元素本身是沒有繪圖能力的.所有的繪製工作必須在 JavaScript 內部完成 方法/步驟 一個返回滑鼠坐標的代碼: <!DOCTYPE HTML> <html> ...