HTML5之5 __Canvas: 漸變-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5之5 __Canvas: 漸變

黄舟

Feb 18, 2017 pm 02:24 PM

漸變Gradient 是一種繪圖方式，它應用在顏色上,

使用漸變需要三個步驟:

1. 創建漸變物件

2. add 為漸變物件

2. add 為漸變物件設定顏色，即函數使用，指明過渡方式, addColorStop 函數允許指定兩個參數: 顏色和偏移量，顏色參數是指開發人員希望在偏移位置描邊或填滿時所使用的顏色。偏移量是一個0.0 到 1.0 之間的數值，代表沿著漸變線漸變的距離有多遠.

3. 在context 上為填滿樣式或描邊樣式設定漸層。

可以將漸變看作是顏色沿著一條線進行緩慢地變化.

請看代碼

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>渐变</title>

  <canvas id="trails" style="border: 1px solid;"  width="400" height="400"> </canvas>
  <script>
        var gravel = new Image();
        gravel.src = "gravel.jpg";
        gravel.onload = function () {
            drawTrails();
        }

        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);

            context.lineTo(0, -140);

            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }

        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);

            context.save();
            context.translate(130, 250);

            // 创建用作树干纹理的三阶水平渐变
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

            // The beginning of the trunk is medium brown
            trunkGradient.addColorStop(0, &#39;#663300&#39;);

            // 树干中间偏左的位置颜色要淡一些
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);

            // 树干右侧边缘的颜色要深一些
            trunkGradient.addColorStop(1, &#39;#552200&#39;);

            // 使用渐变色填充树干
            context.fillStyle = trunkGradient;
            context.fillRect(-8, -50,15, 100);
            //然后，创建垂直渐变，以用作树冠在树干上投影
            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

            // 投影渐变的起点是透明度设为50%的黑色
            canopyShadow.addColorStop(0, &#39;rgba(0, 0, 0, 0.5)&#39;);

            // 方向垂直向下， 渐变色在很短的距离内迅速渐变至完全透明， 这段长度之外的树干上没有投影
            canopyShadow.addColorStop(0.2, &#39;rgba(0, 0, 0, 0.0)&#39;);

            // 在树干上填充投影渐变
            context.fillStyle = canopyShadow;
            context.fillRect(-5, -50, 10, 50);

            createCanopyPath(context);

            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();

            context.fillStyle = &#39;#339900&#39;;
            context.fill();

            context.restore();
        }

  </script>
</html>

登入後複製

canvas 也支援放射性漸變，即顏色會介於兩個指定圓間的錐形區域平滑變化。

法為

createRaddialGraddient(

x0,y0,y0,y0,y0,y0,y0,

y0,

y0
, r

0, x

, y

1
, r

🎜1🎜🎜 共有6個參數，前3個參數代表以(x0, y0) 為圓心，r0 為半徑的圓，後3個參數代表以(x1, y1) 為圓心，r1為半徑的另一個圓，漸變會在兩個圓中間的區域出現.🎜🎜附件，圖片 🎜🎜gravel.jpg🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜15555%5% 的內容，853757537373037 月關注PHP中文網（www.php.cn）！ 🎜🎜🎜🎜🎜🎜🎜

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn