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>
不同透明度的星星图片
方法二：改变图像每个色块的透明度
ImageData对象如图所示：getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
ImageData.data里面存储了图片每个像素的信息，对每个像素进行透明度设置，之后再把新的图片像素信息绘制到画布上即可。
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
