首页 > 其他分享 >在Vue中使用Canvas绘制动态背景

在Vue中使用Canvas绘制动态背景

时间:2022-11-18 00:00:26浏览次数:75  
标签:Canvas Vue canvas 画布 绘图 绘制

好家伙,

 

发现了,在created(){}钩子函数中使用canvas画布貌似是错误的行为

 

vue中canvas的使用 - 掘金 (juejin.cn)

 

于是我们琢磨一下

 

  • 找到cancas元素;
  • 创建context对象;getContext() 方法返回一个用于画布上绘图环境;参数 ‘2d’ 指定了画布上绘制的类型,它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图API。了解别的参数查看MDN文档。
  • 设置fillStyle属性可以是CSS颜色,渐变,或图案。
  • fillRect(x,y,width,height) 方法定义了矩形当前的填充方式,x、y为坐标位置。

 

标签:Canvas,Vue,canvas,画布,绘图,绘制
From: https://www.cnblogs.com/FatTiger4399/p/16901858.html

相关文章

  • Vue-router 的简单应用
    一、基本路由。1、引入vue.js。<scripttype="text/javascript"src="../vue/vue.js"></script>2、引入核心的插件vue-router。<scripttype="text/javascript"s......
  • vue后台管理系统"批量删除"书写逻辑
    先上代码: 首先在整体el-table表格中添加@selection-change="SelectTableList"点击事件,这个主要的作用就是当表格被点击时,会调用这个函数;  然后再表格el-table......
  • Nuxt 3.0 稳定版正式发布,基于 Vue 3 的 Web 框架
    Nuxt是使用简便的Web框架,用于构建现代和高性能的Web应用,可以部署在任何运行JavaScript的平台上。Nuxt3.0今天正式发布了稳定版,3.0基于Vue3,为TypeScript......
  • vue 项目源码映射失败问题解决
    目录vue项目源码映射失败问题解决前言解决方案效果参考vue项目源码映射失败问题解决前言不知何时起,项目控制台调试进入源代码变成编译后的文件了,调试起来十分不便,强迫......
  • [Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL'
    今天在使用Vue进行文件上传的代码编写时,发现报错:[Vuewarn]:Errorinv-onhandler:"TypeError:Failedtoexecute'readAsDataURL'on'FileReader':parameter1is......
  • 在 Vue 中获取 DOM 元素
    一、获取DOM元素。1、在template中标识元素ref="xxx"。2、通过this.$refs.xxx获取元素。3、在组件内通过this.$el可以获取整个组件的DOM。<div><butto......
  • Vue组件之间的通信方式
     父→子子→父 props✖✔查看详情自定义事件 ✖✔ 方式三   ......
  • Vue基础语法
    基本结构helloworldel来匹配元素,#依据id匹配,.依据class匹配data设置数据<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>HelloWorld......
  • vscode打开vue项目突然所有.vue文件第一行报错解决
    yarn重新安装项目所有依赖,并重启vscode后,突然所有.vue文件第一行<template>处报错Parsingerror:Cannotreadpropertiesofundefined(reading'jsx')解决方案:在vscod......
  • vue3 SvgIcon配置
    1、安装依赖插件vite-plugin-svg-iconsyarnaddvite-plugin-svg-icons-D2、安装glob不安装会提示Error:Cannotfindmodule'fast-glob'yarnaddfast-glob-D3、......