HTML5-5 __Canvas: Gradient-H5 Tutorial-php.cn

HTML5-5 __Canvas: Gradient

黄舟

Release： 2017-02-18 14:24:20

Original

1358 people have browsed it

Gradient is a drawing method that is applied to colors.

Using gradient requires three steps:

1. Create a gradient object

2. Set the color for the gradient object, that is, use the addColorStop() function to specify the transition method. The addColorStop function allows you to specify two parameters: color and offset. The color parameter refers to the offset position that the developer hopes to be at. The color to use for stroke or fill. The offset is a value between 0.0 and 1.0, which represents the distance along the gradient line.

3. Set the fill style or stroke style on the context gradient.

You can think of gradient as the color changing slowly along a line.

Please see the code

<!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>

Copy after login

#In addition to the above linear gradient, canvas also supports radioactivity A gradient, where the color changes smoothly over a cone-shaped area between two specified circles.

The method is

createRaddialGraddient(x0,y0, r0, x1, y1, r1); There are 6 parameters in total. The first 3 parameters represent a circle with (x0, y0) as the center and r0 as the radius. The last 3 parameters represent another circle with (x1, y1) as the center and r1 as the radius. The gradient will be in The area between the two circles appears.