HTML5之5__Canvas:渐变

渐变 Gradient 是一种绘图方式，它应用于颜色上,

<!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('trails');
            var context = canvas.getContext('2d');

            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, '#663300');

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

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

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

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

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

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

            createCanopyPath(context);

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

            context.fillStyle = '#339900';
            context.fill();

            context.restore();
        }

  </script>
</html>

除了上述的线性渐变以外， canvas 还支持放射性渐变，即颜色会介于两个指定圆间的锥形区域平滑变化。

方法为 createRaddialGraddient( x 0 , y 0 , r 0 , x 1 , y 1 , r 1 ) ; 共有 6个参数，前3个参数代表以(x0, y0) 为圆心，r0 为半径的圆，后3个参数代表以(x1, y1) 为圆心，r1为半径的另一个圆，渐变会在两个圆中间的区域出现.

附件，图片 gravel.jpg

以上就是HTML5之5 __Canvas: 渐变的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于HTML5之5__Canvas:渐变的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did65665

更新时间：2022-10-13 阅读：66次