canvas实现不同透明度画图片星星

2019-01-03 本文已影响2人星星的成长之路

0.前因

最近跟星星杠上了，觉得用canvas自己画一个星星不仅复杂，可复用性也不高(主要原因是丑)。因此又再次研究了一下canvas直接画图。然后我就意识到自己之前绕远路了......

1.canvas.drawImage可以直接把图片绘制到画布上

drawImage() 方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，或者增加/减少图像的尺寸。

// 在画布上定位图像位置
context.drawImage(img,x,y); 

//在画布上定位图像，并规定图像的宽度和高度
context.drawImage(img,x,y,width,height);

//剪切图像，并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

2.示例的星星图片

star.png

3.全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片星星</title>
</head>
<body>
  <canvas id="canvas-box" width="500" height="500">
  </canvas>
</body>
 <script>
    var canvas = document.getElementById('canvas-box');
    // （x，y）起点坐标，  (width, height)图片星星的大小
    var x = 100, y = 100, width = 60, height = 60;
    var starImg = new Image();
    starImg.src = './star.png';
    var ctx = canvas.getContext("2d");
    
    starImg.onload = function() {
      ctx.drawImage(starImg, x, y, width, height);
    }
  </script>
</html>

4.实现画不同透明度的图片

有两种方法：
1.改变整个画布的透明度
2.选中图片所在的区域，把所有的色块进行透明度处理后，再次绘制到画布上

方法一：改变画布透明度

重点是改变globalAlpha之后就绘制;
在下次绘制之前，重新设置globalAlpha;

<script>
  var canvas = document.getElementById('canvas-box');
  var starImg = new Image();
  starImg.src = './star.png';
  var ctx = canvas.getContext("2d");

   starImg.onload = function () {
    for (var i = 0; i<5; i++) {
      ctx.globalAlpha = 0.2 + i*0.2;
      ctx.drawImage(starImg, 10 + 60*i, 20, 60, 60);
    }
  }
</script>

不同透明度的星星图片

方法二：改变图像每个色块的透明度

getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
ImageData.data里面存储了图片每个像素的信息，对每个像素进行透明度设置，之后再把新的图片像素信息绘制到画布上即可。

ImageData对象如图所示：

ImageData对象

ImageData.data

由于本地图片被认为跨域，因此getImageData方法不生效，大家可以自行解决~

<script>
  var canvas = document.getElementById('canvas-box');
  // （x，y）起点坐标，  (width, height)图片星星的大小
  var starImg = new Image();
  starImg.src = './star.png';
  var ctx = canvas.getContext("2d");

  starImg.onload = function () {
    for (var i = 0; i < 5; i++) {
      var alpha = 0.2 + i*0.2;
      drawStar(starImg, 10 + 60*i, 20, 60, 60, alpha);
    }
  }

  function drawStar (starImg, x, y, w, h, alpha) {
    ctx.beginPath();
    ctx.drawImage(starImg, x, y, w, h);
    // 获取从x、y开始，宽为image.width、高为image.height的图片数据
    console.log('x, y, w, h', x, y, w, h)
    var imgData = ctx.getImageData(x, y, w, h);
    for (var i = 0, len = imgData.data.length; i < len; i += 4) {
      imgData.data[i + 3] = imgData.data[i + 3] * alpha;// 改变每个像素的透明度
    }
    ctx.putImageData(imgData, x, y);// 将获取的图片数据放回去。
    ctx.closePath();
    ctx.save();
  }
</script>

5.参考：

《Canvas 像素处理之改变透明度》https://blog.csdn.net/chengqiuming/article/details/70140494
《canvas的drawImage方法参数详解》
https://blog.csdn.net/kidoo1012/article/details/75174884