canvas getImageData中data数据_getimagedata获取的数组是怎么排列的-CSDN博客

本文链接：https://blog.csdn.net/qq_15769147/article/details/109803769

高度渐变(由浅入深渐变)

<!DOCTYPE html>
<html>
<body style="display: flex;flex-wrap: wrap;">
<script>
    let canvas = document.createElement('canvas');
    let imgW = 8,
        imgH = 128;
    canvas.width = imgW;
    canvas.height = imgH;
    let ctx = canvas.getContext("2d");
    let grd = ctx.createLinearGradient(0, 0, 0, imgH - 1);
	// 创建渐变色
    grd.addColorStop(0,"#ffebe8");
    grd.addColorStop(0.02,"#ffdcd7");
    grd.addColorStop(0.04,"#ffcdc6");
    grd.addColorStop(0.06,"#ffbeb5");
    grd.addColorStop(0.08,"#ffafa4");
    grd.addColorStop(0.10,"#ffa093");
    grd.addColorStop(0.13,"#ff9182");
    grd.addColorStop(0.16,"#ff8271");
    grd.addColorStop(0.20,"#ff7360");
    grd.addColorStop(0.25,"#ff644f");
    grd.addColorStop(0.30,"#ff553e");
    grd.addColorStop(0.35,"#ff462d");
    grd.addColorStop(0.4,"#ff371c");
    grd.addColorStop(0.45,"#c61800");
    grd.addColorStop(0.5,"#b51600");
    grd.addColorStop(0.6,"#a41400");
    grd.addColorStop(0.7,"#931200");
    grd.addColorStop(0.8,"#821000");
    grd.addColorStop(0.9,"#600c00");
    grd.addColorStop(1.0,"#3e0800");
   
    ctx.fillStyle = grd;
    ctx.fillRect(0,0,imgW,imgH);
    let legendColor = ctx.getImageData(0,0,imgW,imgH).data

    let idxs = []
    for(let i = 0; i < 500; i++) {
      idxs.push(i)
    }
    // 所有的颜色
    for(let i = 0; i < legendColor.length; i+=4) {
      let dom = document.createElement('div');
      dom.style.width = '50px'
      dom.style.height = '50px'
      dom.style.margin= '2px'
      dom.innerHTML = `${i}`
      dom.style.backgroundColor = `rgba(${legendColor[i]},${legendColor[i+1]},${legendColor[i+2]},${legendColor[i+3]})`
      document.body.appendChild(dom)
    }
</script>
</body>
</html>

宽度渐变（由浅入深渐变）

<!DOCTYPE html>
<html>
<body style="display: flex;flex-wrap: wrap;">
<script>
    let canvas = document.createElement('canvas');
    let imgW = 128,
        imgH = 20;
    canvas.width = imgW;
    canvas.height = imgH;
    let ctx = canvas.getContext("2d");
    let grd = ctx.createLinearGradient(0, 0, imgW - 1, 0);

    grd.addColorStop(0,"#ffebe8");
    grd.addColorStop(0.02,"#ffdcd7");
    grd.addColorStop(0.04,"#ffcdc6");
    grd.addColorStop(0.06,"#ffbeb5");
    grd.addColorStop(0.08,"#ffafa4");
    grd.addColorStop(0.10,"#ffa093");
    grd.addColorStop(0.13,"#ff9182");
    grd.addColorStop(0.16,"#ff8271");
    grd.addColorStop(0.20,"#ff7360");
    grd.addColorStop(0.25,"#ff644f");
    grd.addColorStop(0.30,"#ff553e");
    grd.addColorStop(0.35,"#ff462d");
    grd.addColorStop(0.4,"#ff371c");
    grd.addColorStop(0.45,"#c61800");
    grd.addColorStop(0.5,"#b51600");
    grd.addColorStop(0.6,"#a41400");
    grd.addColorStop(0.7,"#931200");
    grd.addColorStop(0.8,"#821000");
    grd.addColorStop(0.9,"#600c00");
    grd.addColorStop(1.0,"#3e0800");
 

    ctx.fillStyle=grd;
    ctx.fillRect(0,0,imgW,imgH);
    let legendColor = ctx.getImageData(0,0,imgW,imgH).data

    let idxs = []
    for(let i = 0; i < 500; i++) {
      idxs.push(i)
    }

     // 全部的格子
    for(let i = 0; i < legendColor.length; i+=4) {
	  let dom = document.createElement('div');
      dom.style.width = '50px'
      dom.style.height = '50px'
      dom.style.margin= '2px'
      dom.innerHTML = i
      dom.style.backgroundColor = `rgba(${legendColor[i]},${legendColor[i+1]},${legendColor[i+2]},${legendColor[i+3]})`
      document.body.appendChild(dom)
    }
</script>
</body>
</html>

总结：