精华内容
下载资源
问答
  • // 炫酷渐变色背景粒子线条折线连接canvas动画 export const canvas = (val) => { var requestAnimationFrame = window.requestAnimationFrame || function (callback) { window.setTimeout(callback, ...

    博客地址:http://www.globm.top/blog/1/detail/34
    效果图:
    在这里插入图片描述
    1.新建canvas.js

    
    // 炫酷渐变色背景粒子线条折线连接canvas动画
    export const canvas = (val) => {
      var requestAnimationFrame = window.requestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60)
      }
    
      // var canvas = document.getElementsByTagName("canvas")[0];
      let canvas = val
      let ctx = canvas.getContext('2d')
      let maximumPossibleDistance
      let mousePositionX
      let mousePositionY
      let mouseElement
      let lines = 0
      let objects = []
      var initAnimation = function () {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        maximumPossibleDistance = Math.round(Math.sqrt((canvas.width * canvas.width) + (canvas.height * canvas.height)))
        Math.floor(canvas.width / 2)
        Math.floor(canvas.height / 2)
        objects.length = 0
        clearCanvas()
        createParticles()
      }
      window.addEventListener('resize', function () { initAnimation() }, false)
      // 线条参数配置
      var options = {
        // 初始线条数量
        particlesNumber: 80,
        // 圆点大小
        initialSize: 3,
        moveLimit: 50,
        durationMin: 50,
        durationMax: 300,
        drawConnections: true,
        mouseInteractionDistance: 150,
        mouseGravity: true,
        drawMouseConnections: true,
        // 图标色彩
        red: 25,
        green: 200,
        blue: 255,
        opacity: 1,
        // 已连接线条
        connectionRed: 255,
        connectionGreen: 255,
        connectionBlue: 255,
        connectionOpacity: 0.2,
        // 鼠标移动线条
        mouseConnectionRed: 255,
        mouseConnectionGreen: 255,
        mouseConnectionBlue: 255,
        mouseConnectionOpacity: 0.2
    
      }
      var getRandomBetween = function (a, b) {
        return Math.floor(Math.random() * b) + a
      }
      var getDistance = function (element1, element2) {
        var difX = Math.round(Math.abs(element1.positionX - element2.positionX))
        var difY = Math.round(Math.abs(element1.positionY - element2.positionY))
    
        return Math.round(Math.sqrt((difX * difX) + (difY * difY)))
      }
      function Particle (positionX, positionY, size, red, green, blue, opacity) {
        this.positionX = positionX
        this.positionY = positionY
        this.size = size
    
        this.duration = getRandomBetween(options.durationMin, options.durationMax)
        this.limit = options.moveLimit
        this.timer = 0
    
        this.red = red
        this.green = green
        this.blue = blue
        this.opacity = opacity
    
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      function MouseParticle (positionX, positionY, size, red, green, blue, opacity) {
        this.positionX = mousePositionX
        this.positionY = mousePositionY
        this.size = size
    
        this.red = red
        this.green = green
        this.blue = blue
        this.opacity = opacity
    
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      Particle.prototype.animateTo = function (newX, newY) {
        var duration = this.duration
    
        var animatePosition = function (newPosition, currentPosition) {
          if (newPosition > currentPosition) {
            var step = (newPosition - currentPosition) / duration
            newPosition = currentPosition + step
          } else {
            step = (currentPosition - newPosition) / duration
            newPosition = currentPosition - step
          }
    
          return newPosition
        }
    
        this.positionX = animatePosition(newX, this.positionX)
        this.positionY = animatePosition(newY, this.positionY)
    
        // generate new vector
    
        if (this.timer === this.duration) {
          this.calculateVector()
          this.timer = 0
        } else {
          this.timer++
        }
      }
      Particle.prototype.updateColor = function () {
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      Particle.prototype.calculateVector = function () {
        var distance
        var newPosition = {}
        var particle = this
    
        var getCoordinates = function () {
          newPosition.positionX = getRandomBetween(0, window.innerWidth)
          newPosition.positionY = getRandomBetween(0, window.innerHeight)
    
          distance = getDistance(particle, newPosition)
        }
    
        // eslint-disable-next-line no-unmodified-loop-condition
        while ((typeof distance === 'undefined') || (distance > this.limit)) {
          getCoordinates()
        }
    
        this.vectorX = newPosition.positionX
        this.vectorY = newPosition.positionY
      }
      Particle.prototype.testInteraction = function () {
        if (!options.drawConnections) return
        var closestElement
        var distanceToClosestElement = maximumPossibleDistance
        for (var x = 0; x < objects.length; x++) {
          var testedObject = objects[x]
          var distance = getDistance(this, testedObject)
          if ((distance < distanceToClosestElement) && (testedObject !== this)) {
            distanceToClosestElement = distance
            closestElement = testedObject
          }
        }
        if (closestElement) {
          ctx.beginPath()
          ctx.moveTo(this.positionX + this.size / 2, this.positionY + this.size / 2)
          ctx.lineTo(closestElement.positionX + closestElement.size * 0.5, closestElement.positionY + closestElement.size * 0.5)
          ctx.strokeStyle = 'rgba(' + options.connectionRed + ',' + options.connectionGreen + ',' + options.connectionBlue + ',' + options.connectionOpacity + ')'
          ctx.stroke()
          lines++
        }
      }
      MouseParticle.prototype.testInteraction = function () {
        if (options.mouseInteractionDistance === 0) return
    
        var closestElements = []
        // var distanceToClosestElement = maximumPossibleDistance;
    
        for (var x = 0; x < objects.length; x++) {
          var testedObject = objects[x]
          var distance = getDistance(this, testedObject)
    
          if ((distance < options.mouseInteractionDistance) && (testedObject !== this)) {
            closestElements.push(objects[x])
          }
        }
    
        for (var i = 0; i < closestElements.length; i++) {
          if (options.drawMouseConnections) {
            var element = closestElements[i]
            ctx.beginPath()
            ctx.moveTo(this.positionX, this.positionY)
            ctx.lineTo(element.positionX + element.size * 0.5, element.positionY + element.size * 0.5)
            ctx.strokeStyle = 'rgba(' + options.mouseConnectionRed + ',' + options.mouseConnectionGreen + ',' + options.mouseConnectionBlue + ',' + options.mouseConnectionOpacity + ')'
            ctx.stroke()
            lines++
          }
          if (options.mouseGravity) {
            closestElements[i].vectorX = this.positionX
            closestElements[i].vectorY = this.positionY
          }
        }
      }
      Particle.prototype.updateAnimation = function () {
        this.animateTo(this.vectorX, this.vectorY)
        this.testInteraction()
        ctx.fillStyle = this.color
        ctx.fillRect(this.positionX, this.positionY, this.size, this.size)
      }
      MouseParticle.prototype.updateAnimation = function () {
        this.positionX = mousePositionX
        this.positionY = mousePositionY
        this.testInteraction()
      }
      var createParticles = function () {
        // create mouse particle
        mouseElement = new MouseParticle(0, 0, options.initialSize, 255, 255, 255)
        for (var x = 0; x < options.particlesNumber; x++) {
          var randomX = Math.floor((Math.random() * window.innerWidth) + 1)
          var randomY = Math.floor((Math.random() * window.innerHeight) + 1)
          var particle = new Particle(randomX, randomY, options.initialSize, options.red, options.green, options.blue, options.opacity)
          particle.calculateVector()
          objects.push(particle)
        }
      }
      var updatePosition = function () {
        for (var x = 0; x < objects.length; x++) {
          objects[x].updateAnimation()
        }
        // handle mouse
        mouseElement.updateAnimation()
      }
      window.onmousemove = function (e) {
        mousePositionX = e.clientX
        mousePositionY = e.clientY
      }
      var clearCanvas = function () {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
      }
      var lastCalledTime
      var fps
      var averageFps
      var averageFpsTemp = 0
      var averageFpsCounter = 0
    
      function requestFps () {
        if (!lastCalledTime) {
          lastCalledTime = Date.now()
          fps = 0
          return
        }
        var delta = (new Date().getTime() - lastCalledTime) / 1000
        lastCalledTime = Date.now()
        fps = Math.floor(1 / delta)
    
        averageFpsTemp = averageFpsTemp + fps
        averageFpsCounter++
        if (averageFpsCounter === 5) {
          averageFps = Math.floor(averageFpsTemp / 5)
          averageFpsCounter = 0
          averageFpsTemp = 0
        }
        if (!averageFps) {
    
        } else if (averageFps < 10) {
    
        }
      }
      var loop = function () {
        clearCanvas()
        updatePosition()
        ctx.fillStyle = '#fff'
        // ctx.fillText("FPS: " + fps + " lines: " + lines + " Average FPS: " + averageFps , 10, 20);
        lines = 0
        requestAnimationFrame(loop)
        requestFps()
      }
      initAnimation()
      loop()
      return lines
    }
    
    

    2.引入canvas.js,实现效果

    <template>
      <div class="canvas-page">
        <canvas></canvas>
      </div>
    </template>
    <script>
    import { canvas } from '../plugins/canvas'
    export default {
      name: 'CanvasPage',
      mounted () {
        canvas(document.getElementsByTagName('canvas')[0])
      }
    }
    </script>
    <style lang="less" scoped>
    .canvas-page {
      height: 100vh;
      width: 100vw;
      background-size: cover;
      position: relative;
      background-color: #474747;
      background-image: radial-gradient(circle at 2% 60%, #27278f, transparent 100%),
        radial-gradient(circle at 98% 70%, #000c91, transparent 100%),
        radial-gradient(circle at 50% 50%, #ed68ed, transparent 100%);
      canvas {
        position: absolute;
        left: 0;
        top: 0;
        background: transparent;
        z-index: 15;
      }
    }
    </style>
    
    

    附:canvas速查表 http://canvas.migong.org/html5-canvas

    展开全文
  • 渐变色背景

    2015-08-26 08:37:00
    渐变色背景 body { background: -moz-linear-gradient(top, #45bbf9 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45bbf9), color-stop(100%,#ffff...

    渐变色背景

    body {
        background: -moz-linear-gradient(top, #45bbf9 0%, #ffffff 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45bbf9),     color-stop(100%,#ffffff));
        background: -webkit-linear-gradient(top, #45bbf9 0%,#ffffff 100%);
        background: -o-linear-gradient(top, #45bbf9 0%,#ffffff 100%);
        background: -ms-linear-gradient(top, #45bbf9 0%,#ffffff 100%);
        background: linear-gradient(to bottom, #45bbf9 0%,#ffffff 100%);
    }
    

     

    转载于:https://www.cnblogs.com/fenle/p/4759240.html

    展开全文
  • iOS 创建渐变色背景

    千次阅读 2020-02-17 10:31:25
    创建渐变色背景图片 //#define QCT_DetailOrder_start_COLOR rgb(236,90,85) //#define QCT_DetailOrder_end_COLOR rgb(214,50,44) + (UIImage*)getDetailOrderStateMaingradientColorImage{ CGSize size = ...

    前言

    • 效果
      在这里插入图片描述

    I 、 创建渐变色背景图片

    1.1 核心代码

    //#define QCT_DetailOrder_start_COLOR rgb(236,90,85)
    //#define QCT_DetailOrder_end_COLOR  rgb(214,50,44)
    + (UIImage*)getDetailOrderStateMaingradientColorImage{
        CGSize size = CGSizeMake(SCREENW, 83.0f);
        
        UIColor *topleftColor =  QCT_DetailOrder_start_COLOR;
        
        UIColor *bottomrightColor = QCT_DetailOrder_end_COLOR;
        
        UIImage *bgImg = [UIImage gradientColorImageFromColors:@[topleftColor, bottomrightColor] gradientType:GradientTypeLeftToRight imgSize:size];
        
        return bgImg;
    }
    
    
    

    1.2 使用方法

            UIImage *bgImg = [UIImage getDetailOrderStateMaingradientColorImage];
            UIColor *tmpColor = [UIColor colorWithPatternImage:bgImg];
            
            [tmpView setBackgroundColor:tmpColor];
            
    
    
    展开全文
  • 渐变色背景样式

    2020-07-11 16:09:00
    <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android=... <!-- 边 -->... //圆角渐变色背景 <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp" android:...
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- 边 -->
        //圆角渐变色背景
        <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
            android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
            <item>
                <shape android:shape="rectangle">
                    <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
                    <solid android:color="#363636" />
                     <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
        android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
                    <solid android:color="#373737" />
                    <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
        android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
                    <solid android:color="#383838" />
                    <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
        android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
                    <solid android:color="#393939" />
                     <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
        android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
                    <solid android:color="#404040" />
                     <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
        android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
                </shape>
            </item>
    
            <!-- 中心背景 -->
            <item>
                <shape android:shape="rectangle" android:useLevel="false">
                    <!-- 实心 -->
                      <solid android:color="#FF575F75" />
                     <corners android:topLeftRadius="45dp" android:bottomLeftRadius="45dp"
        android:topRightRadius="40dp" android:bottomRightRadius="45dp"/>
                    <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    

     

    展开全文
  • 前端基础笔记06-练习:滚动渐变色背景 利用动画特效制作带有滚动渐变色背景效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景滚动渐变色<...
  • 八、渐变色背景

    2019-05-23 19:15:56
    // 渐变色背景 background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
  • 如何制作柱状图渐变色背景,我们可以先参考echarts 柱状图颜色设置。接下来我们来实战一下,看看这次的效果图吧。 首先我们可以看到,X 轴表示数据,Y轴表示类别。柱状图上有该地区的数量,同时柱状图颜色从左到...
  • 纯VB API实现窗口的圆形、垂直及水平渐变色背景,点击窗体上的对应单选按钮,即可将窗体设置成对应风格的渐变,本程序实现的渐变一共有三种:水平渐变、垂直渐变、圆形渐变,可应用于图像处理中,也可应用到美化窗口...
  • 我们在创建Powerpoint文档时,系统默认的幻灯片是空白背景的,很多时候我们需要自定义幻灯片背景,...添加渐变色背景 添加图片作为背景 所需工具 Free Spire.Presentation for .NET 版本3.3 (社区版) 示...
  • android 渐变色背景

    2020-07-27 19:37:10
    制作一个渐变色背景, 1.创建一个xml 内容如下(复制过去就可以): <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!--实现应用...
  • qt 使用样式设置渐变色背景

    千次阅读 2018-10-25 17:52:25
    qt中使用样式设置渐变色背景 setStyleSheet()函数设置背景的前期是设置的窗口控件有父窗口   ui.widget-&gt;setStyleSheet("background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, ...
  • 日在论坛上看到了一个关于渐变色的网站,希望大家能用到有了它,谁还敢说我不会用渐变?WebGradients是一个设计师们经常需要用到的UI背景渐变颜色组合,目前提供180个渐变色彩,可以作为网站任何部分的内容背景。此...
  • C#绘制渐变色背景

    2013-07-09 00:21:24
    C#源代码:绘制窗口或控件的渐变背景色。 知识点: 1、直接采用System.Drawing.Drawing2D.LinearGradientBrush笔刷填充渐变背景。 2、调整窗口大小时刷新背景填充。
  • 绿色元素线条流线动感波浪渐变背景 蓝色元素丝绸波浪线条流线渐变背景 橘红色彩波浪丝绸动感简约渐变背景 简约动感黄色元素线条流线渐变背景 红色元素黄色流线波浪丝绸渐变背景 动感波浪紫色元素时尚...
  • GitHub地址: https://github.com/JohnnyHooo/HJViewStyle 特点: xib零代码和代码快速设置View各种样式 阴影和圆角并存 渐变色背景 根据主题色快速设置渐变背景色 pod 'HJViewStyle'
  • echart-渐变色背景

    2019-09-28 13:53:39
    先上图 为了优化界面,设计采用了 渐变色来填充柱状图 配置项series series : [ { name: '数量', type: 'bar', itemStyle: { normal: ...
  • }形状为圆形的径向渐变 #grad{background:-webkit-radial-gradient(circle, red, yellow, green);background:-o-radial-gradient(circle, red, yellow, green);background:-moz-radial-gradient(circle, red, ...
  • Android 渐变色背景

    2017-09-15 10:11:23
    1. 分别取上中下的是那种颜色。我们这里使用 黑色”#000000“, 灰色”#aaaaaa“, 白色”#ffffff“。 2. 在drawable创建一个shape,定义gradient标签,分别定义...type属性定义颜色的渐变类型。 shape xmlns:a
  • css渐变色背景

    2018-06-08 22:20:00
    background: -webkit-linear-gradient(left, #29c5db , #63abf0); /* Safari 5.1 - 6.0 * background: -o-linear-gradient(right, #29c5db , #63abf0); /* Opera 11.1 - 12.0 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,816
精华内容 1,126
关键字:

渐变色背景