zoukankan      html  css  js  c++  java
  • canvas入门-3渐变方法

    1、canvas中渐变方式有2种:线性渐变和径向梯度渐变

    createLineGradient()

    createRadialGradient()

    addColorStop(var1,var2);

    var1 取值在0-1之间

    var2 是颜色值

    前面有讲述线性渐变的作用,渐变是一个渐变对象

    径向渐变方法createRadialGradient创建放射状/圆形渐变对象

    context.createRadialGradient(x0,y0,r0,x1,y1,r1);

    渐变可用于填充矩形、圆形、线条、文本等等。

    1:请使用该对象作为 strokeStylefillStyle 属性的值。

    2:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色

    参数值:

    参数描述
    x0 渐变的开始圆的 x 坐标
    y0 渐变的开始圆的 y 坐标
    r0 开始圆的半径
    x1 渐变的结束圆的 x 坐标
    y1 渐变的结束圆的 y 坐标
    r1 结束圆的半径
    <script type="text/javascript">
    			var oCanvas = document.getElementById('canvas-1');
    			var context = oCanvas.getContext('2d');//指向2d渲染环境的引用
    			context.font = "30px Arial";
    			var gradient=context.createRadialGradient(200,200,10,200,200,100);
    			gradient.addColorStop("0","red");
    			gradient.addColorStop("1.0","white");
    			context.fillStyle = gradient;
    			context.fillRect(0,0,400,400)
    </script> 
    

      

  • 相关阅读:
    freopen
    字符
    map映射
    P3512 [POI2010]PIL-Pilots-洛谷luogu
    快读
    单调队列&单调栈
    简写
    邻接表&链式前向星
    mysql参数详解
    网络管理指南
  • 原文地址:https://www.cnblogs.com/knightshibiao/p/3861130.html
Copyright © 2011-2022 走看看