zoukankan      html  css  js  c++  java
  • HTML5逐步实现

    渐变

            Context对象能够通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象。这两个方法的原型例如以下:

            Object createLinearGradient(x1, y1, x2, y2);

            创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

             Object createRadialGradient(x1, y1, r1, x2, y2, r2);

             创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

             渐变对象创建完毕之后必须使用它的addColorStop()方法来加入颜色,该方法的原型例如以下:

             void addColorStop(position, color);

             当中position表示加入颜色的位置。取值范围为[0, 1],0表示起点,1表示终点;color表示加入的颜色,取值能够是不论什么CSS颜色值。

             渐变对象创建并配置完毕之后就能够将其赋予Context对象的strokeStyle属性或者fillStyle属性,然后绘制的图形就具有了所需的渐变效果。

        那咱们一起看一下以下这个样例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    canvas{
    left: 50%; position:relative; margin-left: -200px; top;
    }
    </style>
    </head>
    <body>
    <canvas id="drawDiagonal" width="400" height="500" style="border: 1px solid #008B8B;"></canvas>
    </body>
    <script type="text/javascript">
    var canvas=document.getElementById('drawDiagonal');
    var cd=canvas.getContext('2d');
    cd.save();
    cd.translate(-10,350);
    cd.beginPath();
    cd.moveTo(0,0);
    cd.quadraticCurveTo(170,-80,260,-190);
    cd.quadraticCurveTo(310,-250,410,-250);
    cd.strokeStyle='#663300';
    cd.lineWidth=50;
    cd.stroke();
    cd.restore();
    var lg = cd.createLinearGradient(80,220,240, 200); //能够尝试改变这里的參数。改变不同的效果。
    lg.addColorStop(0, 'yellow');
    lg.addColorStop(0.9, '#3CB371');
    lg.addColorStop(1,'#2E8B57');
    cd.fillStyle=lg;//把设置好的颜色值附给cd
    cd.strokeStyle ='yellowgreen';
    cd.lineWidth=4;
    cd.lineJoin='round'
    cd.beginPath();
    cd.moveTo(200,40);
    cd.lineTo(160,100);
    cd.lineTo(185,100);
    cd.lineTo(145,160);
    cd.lineTo(170,160);
    cd.lineTo(135,220);
    cd.lineTo(180,220);
    cd.lineTo(170,320);
    cd.lineTo(235,320);
    cd.lineTo(220,220)
    cd.lineTo(260,220);
    cd.lineTo(225,160);
    cd.lineTo(250,160);
    cd.lineTo(210,100);
    cd.lineTo(235,100);
    cd.closePath();
    cd.fill();
    cd.stroke();
    </script>
    </html>


    其效果例如以下图所看到的:


    大家试图去尝试一点点!

    在没有明确的地方是能够相互沟通.

    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    SpringMVC中静态获取request对象 Spring中获取 HttpServletRequest对象【转载】
    springcloud 的loadbalancer 轮询算法切换方法 2021.4.3
    springboot项目启动增加图标
    rabbitmq 端口作用以及修改方法
    centos8 安装rabbitmq
    springcloud config client Value获取不到信息的问题的处理方法
    springcloud config配置git作为数据源然后启动报错 If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
    Sublime Text的列模式如何操作
    centos8 安装redis
    jQuery简单的Ajax调用
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4736282.html
Copyright © 2011-2022 走看看