HTML5之5 __Canvas: 渐变-H5教程-PHP中文网

首页

web前端

H5教程

HTML5之5 __Canvas: 渐变

黄舟

Feb 18, 2017 pm 02:24 PM

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

使用渐变需要三个步骤:

1. 创建渐变对象

2. 为渐变对象设置颜色，即使用 addColorStop()函数，指明过渡方式, 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, r0, x1, y1, r1); 共有 6个参数，前3个参数代表以(x0, y0) 为圆心，r0 为半径的圆，后3个参数代表以(x1, y1) 为圆心，r1为半径的另一个圆，渐变会在两个圆中间的区域出现.

附件，图片 gravel.jpg

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee