跟KingDZ學HTML5之六：Canvas特效-陰影和漸變
編輯：HTML5詳解
我們首先看一下，如何實現一個陰影效果，呵呵，看效果吧
好了 ，先給大家展示一下代碼，在說明一下。
XML/Html Code復制內容到剪貼板- <! doctype Html>
- <Html>
- <head>
- <script type="text/Javascript">
- function draw() {
- var c = document.getElementById("mycanvas");
- var ccxt = c.getContext("2d");
- cxt.shadowOffsetX = 5;
- cxt.shadowOffsetY = 5;
- cxt.shadowBlur = 4;
- cxt.shadowColor = "rgba(255,0,0,0.5)";
- cxt.fillStyle = "orange";
- cxt.arc(50, 50, 50, 0, Math.PI * 2, true);
- cxt.fill();
- }
- </script>
- </head>
- <body>
- <canvas id="mycanvas" width="200" height="200">不支持此標簽 KingDZ原創 http://www.cnblogs.com/hihell</canvas>
- <input type="button" value="畫圖" onclick="draw();" />
- <body>
- </Html>
上面的結果注意點
- shadowColor：陰影顏色。其值和 CSS 顏色值一致。 【之前的課程我已經說明過了】
- shadowBlur：設置陰影模糊程度。此值越大，陰影越模糊。
- shadowOffsetX 和 shadowOffsetY：陰影的 x 和 y 偏移量，單位是像素。
顏色漸變
顏色漸變的幾個重要屬性。
createLinearGradient 和 createRadialGradIEnt。
前者創建線性顏色漸變，後者創建圓形顏色漸變。創建顏色漸變對象後，可以使用對象的 addColorStop 方法添加顏色中間值。
好了，還是用例子說明吧。
JavaScript Code復制內容到剪貼板- createLinearGradIEnt(x1,y1,x2,y2) //(x1,y1)漸變的起點 (x2,y2)漸變的終點
- createRadialGradIEnt(x1,y1,r1,x2,y2,r2) // 前面是一個 原點為 (x1,y1) 半徑為 r1的點，後面的那個是以(x2,y2) 為原點，r2為半徑的點。
addColorStop(position, color)//這個方法的第一個參數，就是位置，取值范圍 0---1.0 color 則必須是一個 CSS 顏色值
下面我們實現一個線性漸變
- function draw() {
- var c = document.getElementById("mycanvas");
- var cxt = c.getContext("2d");
- var lineargradient = cxt.createLinearGradIEnt(0, 0, 200, 0);
- lineargradIEnt.addColorStop(0, 'red');
- lineargradIEnt.addColorStop(1, 'white');
- cxt.fillStyle = lineargradIEnt;
- cxt.fillRect(0, 0, 200, 200);
- }
好了，一個簡單的漸變就做好了。
- function draw() {
- var c = document.getElementById("mycanvas");
- var cxt = c.getContext("2d");
- var rad = cxt.createRadialGradIEnt(70, 70, 70, 40, 40, 10);
- rad.addColorStop(0, "#fff");
- rad.addColorStop(0.7, "#333")
- rad.addColorStop(1, "#000");
- cxt.fillStyle = rad;
- cxt.fillRect(0, 0, 200, 200);
- }
OK，搞定這兩種漸變方式了。
小編推薦
熱門推薦