HTML5-5 __캔버스: 그라데이션-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5-5 __캔버스: 그라데이션

黄舟

Feb 18, 2017 pm 02:24 PM

그라디언트는 색상에 적용되는 그리기 방법입니다.

그라디언트를 사용하려면 다음 세 단계가 필요합니다.

1. 그라데이션 개체 만들기

2. 그래디언트 객체의 색상을 설정합니다. 즉, addColorStop() 함수를 사용하여 전환 방법을 지정합니다. addColorStop 함수를 사용하면 color 및 offset이라는 두 가지 매개변수를 지정할 수 있습니다. 개발자가 원하는 색상입니다. 획이나 채우기에 사용할 색상입니다. 오프셋은 0.0에서 1.0 사이의 값으로 그라데이션 선을 따른 거리를 나타냅니다.

3. 컨텍스트 그라데이션에서 채우기 스타일 또는 획 스타일을 설정합니다.

그라디언트는 선을 따라 색이 천천히 변하는 것이라고 생각하시면 됩니다.

코드를 참고해주세요

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

로그인 후 복사

캔버스는 위에서 언급한 선형 그래디언트 외에도 다음을 지원합니다. 방사능 지정된 두 원 사이의 원뿔 모양 영역에서 색상이 부드럽게 변하는 그라데이션입니다.

메소드는 createRaddialGraddient(x0,y 0, r0, x1, y1, r1); 총 6개의 매개변수가 있습니다. 처음 3개의 매개변수는 중심이 (x0, y0)이고 반지름이 r0인 원을 나타냅니다. 마지막 3개의 매개변수는 중심이 (x1, y1)이고 반지름이 r1인 원을 나타냅니다. . 그라데이션은 두 원 사이에 나타납니다.