在Vue中使用Canvas绘制背景

vue,使用,canvas,绘制,背景 · 浏览次数 : 1514

小编点评

**法一:使用canvas元素** 1. 使用 `document.getElementById()` 获取 canvas 元素。 2. 使用 `getContext()` 方法创建画布上下文。 3. 使用 `drawImage()` 方法绘制背景图片。 4. 设置 `fillStyle` 属性以定义填充方式。 5. 使用 `fillRect()` 方法绘制矩形区域。 **法二:使用图片资源** 1. 创建 `Image` 对象来加载图片资源。 2. 设置 `src` 属性设置图片源地址。 3. 使用 `drawImage()` 方法绘制背景图片。 4. 设置 `style.border` 属性以设置边框样式。 **注意**: * `2d` 参数在 `getContext()` 方法中指定二维绘图。 * `drawImage()` 方法的参数 `x`、`y`、`width` 和 `height` 用于定义矩形的绘制位置和大小。 * `bg` 是一个 `Image` 对象,它用于存储背景图片。 * `setInterval()` 方法用于绘制背景图片循环,以实现炫动的效果。

正文

好家伙,

 

在vue中使用canvas绘制与在html中使用canvas绘制大致相同,

但又有所区别

 

 法一(无图片资源):

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

 

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

 
 

法二(有图片资源):

 

var img = new Image();   // 创建 img 元素
img.onload = function(){
  // 执行 drawImage 语句
}
img.src = 'myImage.png'; // 设置图片源地址

 

 

修Bug:然而为什么画不出来呢?

 

<template>
    <div>
        <canvas id="myCanvas" width="480" height="650"></canvas>
        <!-- <img src="../../assets/background.png" alt=""> -->
    </div>
</template>
<script>
export default {
    mounted() {
        this.initCancas();
    },
    methods: {
        initCancas() {
            console.log("初始化canvas");
            let canvas = document.getElementById('myCanvas');
            let context = canvas.getContext('2d');
            const bg = new Image();
            bg.src = "../../assets/background.png";
            context.drawImage(bg, 0,0);
            console.log('结束')
            bg.addEventListener("load", () => {
                setInterval(() => {
                    context.drawImage(this.bg, 0,0);
                },10)
            })
        },

    }
}
</script>
<style>
canvas {
      border: 1px solid red;
    }
</style>

 

(明天给他解决一下) 

 

 

与在Vue中使用Canvas绘制背景相似的内容:

在Vue中使用Canvas绘制背景

好家伙, 在vue中使用canvas绘制与在html中使用canvas绘制大致相同, 但又有所区别 法一(无图片资源): vue中canvas的使用 - 掘金 (juejin.cn) 找到cancas元素; 创建context对象;getContext() 方法返回一个用于画布上绘图环境;参数 ‘2

使用taro+canvas实现微信小程序的图片分享功能

业务场景 二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。 使用场景及功能:微信小程序 生成海报图片 分享好友 下载图片 使用技术:Taro vue vant

掉了两根头发后,我悟了!vue3的scoped原来是这样避免样式污染(上)

前言 众所周知,在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x,同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。注:本文

在 Vue 中控制表单输入

Vue中v-model的思路很简单。定义一个可响应式的text(通常是一个ref),然后用v-model="text"将这个值绑定到一个input上。这就创造了一个双向的数据流: 用户在输入框中输入,text会发生变化。 text发生变化,输入框的值也随之变化。 让我们看看如何在Vue 3中使用v-

vue中key使用的问题

前言 在vue要求在遍历的时候最好加上key,在使用过程中总有些疑问,在这里做下分析 1.不使用key的时候vue是怎么处理的 在vue2.x文档中有如下描述 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key

如何在现有的Vue项目中嵌入 Blazor项目?

目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用,上期已经做好了react的教材! 准备流程 Vue 项目创建流程 使用Vue创建一个Demo项目 全部选择默认No即可 然后项目名称就用demo了 npm init vue@latest cd dem

在Vue3+TypeScript 前端项目中使用事件总线Mitt

事件总线Mitt使用非常简单,本篇随笔介绍在Vue3+TypeScript 前端项目中使用的一些场景和思路。我们在Vue 的项目中,经常会通过emits 触发事件来通知组件或者页面进行相应的处理,不过我们使用事件总线Mitt来操作一些事件的处理,也是非常方便的。

在vue中实现一个插件

## 1、使用情景 * 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。 * 通过 app.provide() 使一个资源可被注入进整个应用。 * 向 app.config.globalProperties 中添加一些全局实例属性或方法 *

再谈vue中的differ算法

Differ算法 在 Vue 中,当数据变化时,Vue 会使用 Virtual DOM 和 diff 算法来尽可能地减少 DOM 操作的次数,以提高性能。 diff 算法是 Virtual DOM 实现中的核心算法之一,其主要作用是比较新旧虚拟 DOM 树的差异,并将差异应用到真实的 DOM 树上。

Iframe在Vue中的状态保持技术

Iframe是一个历史悠久的HTML元素,根据MDN WEB DOCS官方介绍,Iframe定义为HTML内联框架元素,表示嵌套的Browsing Context,它能够将另一个HTML页面嵌入到当前页面中。Iframe可以廉价实现跨应用级的页面共享,并且具有使用简单、高兼容性、内容隔离等优点,因此以Iframe为核心形成了前端平台架构领域第1代技术。