从零开始学习在VUE3中使用canvas(四)：globalAlpha(全局透明度)

一天只码五十行

已于 2024-03-23 23:07:26 修改

阅读量793

点赞数 9

文章标签：学习前端 javascript

于 2024-03-19 13:55:37 首次发布

本文链接：https://blog.csdn.net/qq_45820271/article/details/136839351

版权

一、简介

在canvas中，我们可以使用下面的方式设置全局透明度：

  const ctx = canvas.getContext("2d");
  ctx.globalAlpha = 0.5;

当然，在设置透明度的时候也可以直接填充带透明度的颜色

ctx.fillStyle = "rgba(175, 20, 184, 0.5)";

二、代码

<template>
  <div class="canvasPage">
    <!-- 写一个canvas标签 -->
    <canvas class="main" ref="main"></canvas>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";

// 获取canvas元素
const main = ref<HTMLCanvasElement>();

// 绘制canvas
const drawCanvas = () => {
  // 确保获取到了canvas元素
  if (!main.value) return console.error("无法获取Canvas元素");
  const canvas = main.value;

  // 设置canvas的宽高
  canvas.width = 200;
  canvas.height = 100;

  // 获取Canvas绘制2D环境
  const ctx = canvas.getContext("2d");
  if (!ctx) return console.error("无法获取CanvasRenderingContext2D");
  // 设置后面所有元素透明度
  ctx.globalAlpha = 0.5;
  // 定义后面绘制的图形的颜色
  ctx.fillStyle = "rgba(1,51,185)";
  // 绘制矩形（矩形左上角坐标x，y，宽度，高度）
  ctx.fillRect(0, 0, 100, 100);
  // 可以直接在设置颜色时设置透明度
  ctx.fillStyle = "rgba(175, 20, 184, 0.5)";
  // 绘制矩形（矩形左上角坐标x，y，宽度，高度）
  ctx.fillRect(50, 0, 100, 100);
};

// 页面挂载后才能绘制
onMounted(() => {
  drawCanvas();
});
</script>
<style lang="scss" scoped>
.canvasPage {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dddddf;
  .main {
    width: 200px;
    height: 100px;
  }
}
</style>