zoukankan      html  css  js  c++  java
  • canvas阴影与渐变

     1、阴影
      shadowColor 阴影颜色

      shadowOffsetX    阴影x轴的偏移量

      shadowOffsetY    y轴偏移量

      shadowBlur   模糊像素

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    context.shadowColor = 'rgba(280,187,188,1)';
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 20;
    context.fillStyle = 'rgba(280,187,188,1)';
    context.fillRect(50,50,100,100);

    2、渐变,由canvasGradient实例表示。

    (1)线性渐变createLinearGradient(起点x,起点y,终点x,终点y),创建指定大小的渐变。

    var gradient = context.createLinearGradient(30,30,130,130);
    gradient.addColorStop(0,'rgba(280,187,188,1)');// addColorStop()指定色标
    gradient.addColorStop(1,'rgba(180,187,188,1)');
    context.fillStyle = gradient;
    context.fillRect(10,10,100,100);

    注:上例中执行代码所得矩形,粉色多于灰色,是因为矩形的起点位置位于渐变的位置的左上方。

     (2)径向渐变(或放射渐变)createRadialGradient(),接收6个参数。两个圆的圆心及半径。

    context.save();
    var gradient = context.createRadialGradient(350,350,10,350,350,100);
    gradient.addColorStop(0,'rgba(180,187,188,1)');
    gradient.addColorStop(1,'rgba(280,187,188,1)');
    context.fillStyle = gradient;
    context.fillRect(250,250,200,200);

     3、使用图片、画布或video

    (1)使用图片createPattern(img, repeat-style)

    var backgroundImg = new Image();
    backgroundImg.src = 'fanfan.jpg';
    backgroundImg.onload = function(){
        var pattern = context.createPattern(backgroundImg, 'no-repeat');//可使用repeat-x/repeat-y/repeat
        context.fillStyle = pattern;
        context.fillRect(10,10,560,560);
    }

    (2)使用画布createPattern(canvas, repeat-style)

    var backgroundCanvas = document.createElement('canvas');
    backgroundCanvas.width = 100;
    backgroundCanvas.height = 100;
    backgroundContext = backgroundCanvas.getContext('2d');
    backgroundContext.fillStyle = '#eee';
    backgroundContext.fillRect(0,0,100,100);
    
    var patternCanvas = context.createPattern(backgroundCanvas, 'repeaet');
    context.fillStyle = patternCanvas;//使用backgroundCanvas填充canvas
    context.fillRect(0,0,300,300);

    (3)使用video

  • 相关阅读:
    【转载】eclipse常用插件在线安装地址或下载地址
    【转载】Eclipse快捷键 10个最有用的快捷键
    Visual Studio(C#)快捷键与Eclipse(JAVA)快捷键对比
    【转载】Eclipse 的快捷键以及文档注释、多行注释的快捷键
    Spring 事务配置的几种方式
    Linux下 执行程序
    转:C# 通过委托更新UI(异步加载)
    C#AutoResetEvent和ManualResetEvent的区别
    转 RMI、RPC、SOAP通信技术介绍及比对
    转泛型
  • 原文地址:https://www.cnblogs.com/cornlin/p/7648464.html
Copyright © 2011-2022 走看看