canvas fillrect方法 设置矩形透明

在HTML5 Canvas中，要设置`fillRect`方法填充的矩形部分具有透明性，你可以使用`globalAlpha`属性。这个属性表示当前绘图操作的透明度，范围从0（完全透明）到1（完全不透明）。例如：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置透明度
ctx.globalAlpha = 0.5; // 半透明

// 使用透明颜色填充矩形
ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; // 颜色后面跟着透明度，这里是绿色半透明
ctx.fillRect(x, y, width, height);

在这个示例中，我们不仅设置了全局透明度`globalAlpha`，还指定了颜色的rgba形式，其中alpha通道（即透明度）为0.5。这样，当矩形被填充时，它会以50%的透明度显示。

如果你想要改变复合模式来实现更复杂的透明效果，可以使用`globalCompositeOperation`属性，但通常`globalAlpha`就足以满足简单的透明需求。

相关问题

canvas fillRect

canvas的fillRect方法是用来绘制填充矩形的。在使用fillRect方法之前，需要先找到对应的canvas元素。可以通过querySelector方法和元素的id属性来获取canvas元素。例如，var canvas = document.querySelector("#myCanvas");然后，可以使用canvas的getContext方法来获取一个用于绘制的上下文对象，通过调用上下文对象的fillRect方法来实现填充矩形的功能。填充矩形的样式可以通过设置fillStyle属性来改变。例如，content.fillStyle = "red"; content.fillRect(0, 0, 200, 100); content.fill();以上是绘制填充矩形的基本步骤和方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [了解认识Canvas](https://blog.csdn.net/nowchange/article/details/94591227)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

Canvas设置透明度

在Canvas中设置透明度可以使用`globalAlpha`属性。该属性可以设置当前绘图的透明度，它的取值范围为0-1，其中0表示完全透明，1表示完全不透明。

示例代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 绘制一个红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// 设置透明度为0.5
ctx.globalAlpha = 0.5;

// 绘制一个蓝色矩形
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 100, 100);

在上面的代码中，我们先绘制了一个红色矩形，然后设置透明度为0.5，接着绘制了一个蓝色矩形。由于透明度为0.5，所以蓝色矩形会显示出部分红色矩形的颜色。