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
