JavaScript 如何計(jì)算兩個(gè)顏色之間的漸變色值？

AJie 發(fā)布于2019-08-23 16:28 / 1128人閱讀

摘要：對(duì)給定的兩個(gè)顏色值進(jìn)行漸變計(jì)算，得到漸變的所有色值的數(shù)組。如何計(jì)算兩個(gè)顏色之間的漸變色值知乎計(jì)算漸變過渡色將轉(zhuǎn)換為計(jì)算每一步的差值計(jì)算每一步的值作者你愛誰如鯨向海鏈接示例計(jì)算與之間的漸變色值，步長設(shè)定為

對(duì)給定的兩個(gè)顏色值進(jìn)行漸變計(jì)算，得到漸變的所有色值的數(shù)組。

JavaScript如何計(jì)算兩個(gè)顏色之間的漸變色值？ -- 知乎

    // rgb to hex
    function rgbToHex(r, g, b){
      var hex = ((r<<16) | (g<<8) | b).toString(16);
      return "#" + new Array(Math.abs(hex.length-7)).join("0") + hex;
    }

    // hex to rgb
    function hexToRgb(hex){
      var rgb = [];
      for(var i=1; i<7; i+=2){
          rgb.push(parseInt("0x" + hex.slice(i,i+2)));
      }
      return rgb;
    }

    // 計(jì)算漸變過渡色
    function gradient (startColor,endColor,step){
      // 將 hex 轉(zhuǎn)換為rgb
      var sColor = hexToRgb(startColor),
        eColor = hexToRgb(endColor);

      // 計(jì)算RGB每一步的差值
      var rStep = (eColor[0] - sColor[0]) / step;
        gStep = (eColor[1] - sColor[1]) / step;
        bStep = (eColor[2] - sColor[2]) / step;

      var gradientColorArr = [];
      for(var i=0;i
作者：你愛誰如鯨向海
鏈接：https://www.zhihu.com/questio...
示例：計(jì)算 #ec9089 與 #c12927 之間的漸變色值，步長設(shè)定為 100
    var startColor = "#ec9089";
    var endColor = "#c12927";
    var step = 100;
    var colorArr = gradient(startColor, endColor, 100);
    
    console.log(colorArr)
    // ["#ec9089", "#eb8e88", "#eb8d87", "#ea8c86", ...]

云服務(wù)器 GPU云服務(wù)器 java計(jì)算兩個(gè)日期之間的天數(shù) 兩值之間 asp 兩個(gè)日期之間兩個(gè)服務(wù)器之間訪問

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103066.html

相關(guān)文章

Python學(xué)習(xí)之路14-生成數(shù)據(jù)

摘要：小結(jié)本篇主要講述了如何生成數(shù)據(jù)集以及如何對(duì)其進(jìn)行可視化如何使用創(chuàng)建簡單的圖表如果使用散點(diǎn)圖來探索隨機(jī)漫步過程如何使用創(chuàng)建直方圖，以及如何使用直方圖來探索同時(shí)擲兩個(gè)面數(shù)不同的骰子的結(jié)果。《Python編程：從入門到實(shí)踐》筆記。從本篇起將用三篇的篇幅介紹如何用Python進(jìn)行數(shù)據(jù)可視化。 1. 前言從本篇開始，我們將用三篇的篇幅來初步介紹如何使用Python來進(jìn)行數(shù)據(jù)可視化操作。本篇的...

wanglu1209 2019-07-31 11:09 評(píng)論0 收藏0
基于vue的svg進(jìn)度條組件

摘要：基于的簡單的進(jìn)度條在線在線是什么是一款基于項(xiàng)目二次開發(fā)的組件功能特性零依賴體積小目前支持圓環(huán)矩形的進(jìn)度條配置多滿足多樣需求持續(xù)維護(hù)安裝使用詳細(xì)介紹普通模式引入例子詳細(xì)介紹配置參數(shù)進(jìn)度條類型進(jìn)度條的初始值 svg-progress-bar 基于Vue.js的簡單的svg進(jìn)度條 showImg(https://segmentfault.com/img/remote/146000001282...

fasss 2019-08-22 13:46 評(píng)論0 收藏0
使用Canvas操作像素

摘要：但即使這兩件事結(jié)合起來，我們也無法直接訪問和操縱這些像素。實(shí)際上，我們可以從視頻本身將圖像繪制到，這使我們能夠操作和展示這些像素。您甚至可以在不使用圖像或視頻的情況下即時(shí)創(chuàng)建效果現(xiàn)代瀏覽器支持通過元素播放視頻。大多數(shù)瀏覽器也可以通過MediaDevices.getUserMedia() API訪問攝像頭。但即使這兩件事結(jié)合起來，我們也無法直接訪問和操縱這些像素。幸運(yùn)的是，瀏覽器有一...

Lsnsh 2019-08-29 15:42 評(píng)論0 收藏0
使用Canvas操作像素

摘要：但即使這兩件事結(jié)合起來，我們也無法直接訪問和操縱這些像素。實(shí)際上，我們可以從視頻本身將圖像繪制到，這使我們能夠操作和展示這些像素。您甚至可以在不使用圖像或視頻的情況下即時(shí)創(chuàng)建效果現(xiàn)代瀏覽器支持通過元素播放視頻。大多數(shù)瀏覽器也可以通過MediaDevices.getUserMedia() API訪問攝像頭。但即使這兩件事結(jié)合起來，我們也無法直接訪問和操縱這些像素。幸運(yùn)的是，瀏覽器有一...

Nino 2019-08-22 18:00 評(píng)論0 收藏0
使用Canvas操作像素

摘要：但即使這兩件事結(jié)合起來，我們也無法直接訪問和操縱這些像素。實(shí)際上，我們可以從視頻本身將圖像繪制到，這使我們能夠操作和展示這些像素。您甚至可以在不使用圖像或視頻的情況下即時(shí)創(chuàng)建效果現(xiàn)代瀏覽器支持通過元素播放視頻。大多數(shù)瀏覽器也可以通過MediaDevices.getUserMedia() API訪問攝像頭。但即使這兩件事結(jié)合起來，我們也無法直接訪問和操縱這些像素。幸運(yùn)的是，瀏覽器有一...

wenshi11019 2019-08-02 10:42 評(píng)論0 收藏0