canvas系列 — canvas改变画布大小后，画布变空白的原因及解决方案

最新推荐文章于 2024-06-29 15:30:58 发布

haoyanyu_

最新推荐文章于 2024-06-29 15:30:58 发布

阅读量4.7k

点赞数 3

分类专栏：日常总结

本文链接：https://blog.csdn.net/haoyanyu_/article/details/108564827

版权

本文探讨了canvas在改变大小后变为空白的问题，解释了原因并提供了解决方案。通过使用getImageData和putImageData方法，可以在调整canvas尺寸前保存内容，避免重绘时丢失画布信息。在实际项目中，例如在合成视频的时间轴场景下，这个方法能有效应对画布尺寸动态变化的挑战。

摘要由CSDN通过智能技术生成

前言

之前记录过canvas常用的api的含义这些理论知识
下面通过几个实战🌰来加深对canvas的理解和使用
（以下代码都是基于vue3的，顺道一起学习，一举两得😁）

css和js都可以控制画布大小的改变，但是css里只是让画布像图片一样缩放，内部的像素大小是不变的。直接在html标签中设置width和height属性或者使用JavaScript也可以改变画布的尺寸，这个时候就不是缩放画布了，而是真正的改变了画布内的像素大小。

🌰 例子 🌰

改变canvas大小，画布会变空白的原因

如下图：canvas绘制hello world后，点击按钮改变canvas高度，引起画布重绘，画布内容会丢失

代码如下（vue3代码）：

<template>
<div>
  <div class="change-size">
    <p>动态改变canvas大小</p>
    <span>例如: 点击按钮2秒后，改变canvas高度，会引起canvas的重新加载，导致已经绘制好的内容丢失</span>
    <br />
    <button class="my-btn" @click="changeSize">改变canvas高度</button>
    <canvas id="text" width="600" :height="tHeight" style="background: #ececec"></canvas>
  </div>
  
</div>
</template>

<script>
import {
    ref } from 'vue';
export default {
   
  name: 'BlurSolution',
  setup(