从零开始学习在VUE3中使用canvas(一):实现一个基础的canvas画布

一、步骤

1.写一个canvas元素

2.获取虚拟dom

3.获取绘制环境

4.绘制想要的效果

5.在挂载后执行

二、代码

html 复制代码
<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 = 100;
  canvas.height = 100;

  // 获取Canvas绘制2D环境
  const ctx = canvas.getContext("2d");
  if (!ctx) return console.error("无法获取CanvasRenderingContext2D");
  // 定义后面绘制的图形的颜色
  ctx.fillStyle = "red";
  // 绘制矩形(矩形左上角坐标x,y,宽度,高度)
  ctx.fillRect(0, 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: 100px;
    height: 100px;
  }
}
</style>

三、效果

下一篇:从零开始学习在VUE3中使用canvas(二):fillStyle(填充样式)-CSDN博客

相关推荐
开发者如是说3 分钟前
我用 Compose 写了一个 i18n 多语言管理工具
前端·后端·架构
微信api接口介绍10 分钟前
微信个人发消息api
运维·服务器·开发语言·前端·网络·微信·ipad
阿明Drift13 分钟前
从炫酷粒子星云学 Three.js:深度解析一个 15 万粒子的 GPU 动画系统
前端·three.js
凉_橙16 分钟前
移动端h5适配方案
前端
久亮哦16 分钟前
开发Electron程序
前端·javascript·electron
敲敲了个代码20 分钟前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
你们的前端课代表20 分钟前
前端如何优雅地“边聊边等”——用 Fetch 实现流式请求大模型
前端
王大宇_21 分钟前
React闭包陷阱
前端·javascript
A达峰绮33 分钟前
Actix-web 框架性能优化技巧深度解析
前端·性能优化·actix-web
俊俊谢33 分钟前
【序章】金融量化入门级学习——暨一颗韭菜的茁壮成长
学习·金融