程式語言教學誌 FB, YouTube: PYDOING: HTML DOM 快速導覽 - CanvasRenderingContext2D 物件的方法 createLinearGradient()

CanvasRenderingContext2D 為 HTML 5 內嵌元素 (embedded content) <canvas> 的 getContext() 方法所回傳的物件 (object) ， createLinearGradient() 為 CanvasRenderingContext2D 的方法，回傳 CanvasGradient 物件，用來設定線狀的漸層顏色。

createLinearGradient() 需要四個參數

createLinearGradient(x0, y0, x1, y1)

(x0, y0) 與 (x1, y1) 為兩組座標，前者為起始座標，後者為結束座標。舉例如下

function run() {
    var d = document.getElementsByTagName("canvas");
    var c = d[0].getContext("2d");
    var lingrad = c.createLinearGradient(0, 0, 0, 150);
    lingrad.addColorStop(0, "#000000");
    lingrad.addColorStop(0.9, "#fff");
    c.fillStyle = lingrad;
    c.fillRect(0, 0, 180, 180);
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo095.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */

此例用 document 物件的 getElementsByTagName() 方法 (method) ，取得標籤名稱為 canvas 的 HTMLCollection 物件，文件的第一個 <canvas> 元素亦即該 HTMLCollection 索引值為 0 的物件

var d = document.getElementsByTagName("canvas");
var c = d[0].getContext("2d");

下面先利用 createLinearGradient() 取得設定漸層顏色的 CanvasGradient 物件，然後呼叫 addColorStop() 設定漸層顏色，最後將顏色填滿在正方形中

var lingrad = c.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, "#000000");
lingrad.addColorStop(0.9, "#fff");
c.fillStyle = lingrad;
c.fillRect(0, 0, 180, 180);

我們以下面的 HTML 文件載入

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="htmldemo095.js" type="text/javascript"></script>
</head>
<body onload="run();">
<canvas id="demo" width="180" height="180"></canvas>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo095.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->

瀏覽器 (broswer) 開啟如下

中英文術語對照
內嵌元素	embedded content
物件	object
屬性	attribute
方法	method
瀏覽器	broswer

您可以繼續參考

HTML 5 範例

HTML 5 快速導覽 - 內嵌元素 <canvas>

HTML 元素物件

根元素

<html> (HTMLHtmlElement)

文件資料元素

<head> (HTMLHeadElement)

<title> (HTMLTitleElement)

<base> (HTMLBaseElement)

<link> (HTMLLinkElement)

<meta> (HTMLMetaElement)

<style> (HTMLStyleElement)

<script> (HTMLScriptElement)

<noscript> (HTMLElement)

文件區域元素

<body> (HTMLBodyElement)

<section> (HTMLElement)

<nav> (HTMLElement)

<article> (HTMLElement)

<aside> (HTMLElement)

<h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement)

<hgroup> (HTMLElement)

<header> (HTMLElement)

<footer> (HTMLElement)

<address> (HTMLElement)

群組元素

<p> (HTMLParagraphElement)

<hr> (HTMLHRElement)

<pre> (HTMLPreElement)

<blockquote> (HTMLQuoteElement)

<ol> (HTMLOListElement)

<ul> (HTMLUListElement)

<li> (HTMLLIElement)

<dl> (HTMLDListElement)

<dt> (HTMLElement)

<dd> (HTMLElement)

<figure> (HTMLElement)

<figcaption> (HTMLElement)

<div> (HTMLDivElement)

文字層級元素

<a> (HTMLAnchorElement)

<em> (HTMLElement)

<strong> (HTMLElement)

<small> (HTMLElement)

<s> (HTMLElement)

<cite> (HTMLElement)

<q> (HTMLQuoteElement)

<dfn> (HTMLElement)

<abbr> (HTMLElement)

<data> (HTMLDataElement)

<time> (HTMLTimeElement)

<code> (HTMLElement)

<var> (HTMLElement)

<samp> (HTMLElement)

<kbd> (HTMLElement)

<sub> (HTMLElement)

<sup> (HTMLElement)

<i> (HTMLElement)

<b> (HTMLElement)

<u> (HTMLElement)

<mark> (HTMLElement)

<ruby> (HTMLElement)

<rt> (HTMLElement)

<rp> (HTMLElement)

<bdi> (HTMLElement)

<bdo> (HTMLElement)

<span> (HTMLSpanElement)

<br / > (HTMLBRElement)

<wbr> (HTMLElement)

編修記錄元素

<ins> (HTMLModElement)

<del> (HTMLModElement)

內嵌媒體元素

<img> (HTMLImageElement)

<iframe> (HTMLIFrameElement)

<embed> (HTMLEmbedElement)

<object> (HTMLObjectElement)

<param> (HTMLParamElement)

<video> (HTMLVideoElement)

<audio> (HTMLAudioElement)

<source> (HTMLSourceElement)

<track> (HTMLTrackElement)

<canvas> (HTMLCanvasElement)

CanvasRenderingContext2D

CanvasRenderingContext2D.canvas

CanvasRenderingContext2D.save()

CanvasRenderingContext2D.restore()

CanvasRenderingContext2D.scale()

CanvasRenderingContext2D.rotate()

CanvasRenderingContext2D.translate()

CanvasRenderingContext2D.transform()

CanvasRenderingContext2D.setTransform()

CanvasRenderingContext2D.globalAlpha

CanvasRenderingContext2D.globalCompositeOperation

CanvasRenderingContext2D.strokeStyle

CanvasRenderingContext2D.fillStyle

CanvasRenderingContext2D.createLinearGradient()

CanvasRenderingContext2D.createRadialGradient()

CanvasGradient 物件

CanvasGradient.addColorStop()

CanvasRenderingContext2D.createPattern()

CanvasRenderingContext2D.lineWidth

CanvasRenderingContext2D.lineCap

CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.miterLimit

CanvasRenderingContext2D.shadowOffsetX

CanvasRenderingContext2D.shadowOffsetY

CanvasRenderingContext2D.shadowBlur

CanvasRenderingContext2D.shadowColor

CanvasRenderingContext2D.clearRect()

CanvasRenderingContext2D.fillRect()

CanvasRenderingContext2D.strokeRect()

CanvasRenderingContext2D.beginPath()

CanvasRenderingContext2D.closePath()

CanvasRenderingContext2D.moveTo()

CanvasRenderingContext2D.lineTo()

CanvasRenderingContext2D.quadraticCurveTo()

CanvasRenderingContext2D.bezierCurveTo()

CanvasRenderingContext2D.arcTo()

CanvasRenderingContext2D.rect()

CanvasRenderingContext2D.arc()

CanvasRenderingContext2D.fill()

CanvasRenderingContext2D.stroke()

CanvasRenderingContext2D.drawSystemFocusRing()

CanvasRenderingContext2D.drawCustomFocusRing()

CanvasRenderingContext2D.scrollPathIntoView()

CanvasRenderingContext2D.clip()

CanvasRenderingContext2D.isPointInPath()

CanvasRenderingContext2D.font

CanvasRenderingContext2D.textAlign

CanvasRenderingContext2D.textBaseline

CanvasRenderingContext2D.fillText()

CanvasRenderingContext2D.strokeText()

CanvasRenderingContext2D.measureText()

CanvasRenderingContext2D.drawImage()

CanvasRenderingContext2D.createImageData()

CanvasRenderingContext2D.getImageData()

CanvasRenderingContext2D.putImageData()

<map> (HTMLMapElement)

<area> (HTMLAreaElement)

<applet> (HTMLAppletElement)

表格元素

<table> (HTMLTableElement)

<caption> (HTMLTableCaptionElement)

<colgroup> (HTMLTableColElement)

<col> (HTMLTableColElement)

<tbody> (HTMLTableSectionElement)

<thead> (HTMLTableSectionElement)

<tfoot> (HTMLTableSectionElement)

<tr> (HTMLTableRowElement)

<td> (HTMLTableDataCellElement)

<th> (HTMLTableHeaderCellElement)

表單元素

<form> (HTMLFormElement)

<fieldset> (HTMLFieldSetElement)

<legend> (HTMLLegendElement)

<label> (HTMLLabelElement)

<input> (HTMLInputElement)

<button> (HTMLButtonElement)

<select> (HTMLSelectElement)

<datalist> (HTMLDataListElement)

<optgroup> (HTMLOptGroupElement)

<option> (HTMLOptionElement)

<textarea> (HTMLTextAreaElement)

<keygen> (HTMLKeygenElement)

<output> (HTMLOutputElement)

<progress> (HTMLProgressElement)

<meter> (HTMLMeterElement)

互動式元素

<details> (HTMLDetailsElement)

<summary> (HTMLElement)

<command> (HTMLCommandElement)

<menu> (HTMLMenuElement)

相關目錄

HTML DOM 快速導覽
 JavaScript 教材
 首頁

參考資料

https://developer.mozilla.org/en/DOM/HTMLCanvasElement
https://developer.mozilla.org/en/HTML/Element/canvas
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

程式語言教學誌 FB, YouTube: PYDOING

網頁

HTML DOM 快速導覽 - CanvasRenderingContext2D 物件的方法 createLinearGradient()

沒有留言:

本站網址連結語法

追蹤本站

累計流量