canvas系列 |
您所在的位置：网站首页 › 小程序画布大小 › canvas系列 |
canvas系列
|
前言
之前记录过canvas常用的api的含义这些理论知识 下面通过几个实战🌰来加深对canvas的理解和使用 （以下代码都是基于vue3的，顺道一起学习，一举两得😁） css和js都可以控制画布大小的改变，但是css里只是让画布像图片一样缩放，内部的像素大小是不变的。直接在html标签中设置width和height属性或者使用JavaScript也可以改变画布的尺寸，这个时候就不是缩放画布了，而是真正的改变了画布内的像素大小。 🌰 例子 🌰改变canvas大小，画布会变空白的原因 如下图：canvas绘制hello world后，点击按钮改变canvas高度，引起画布重绘，画布内容会丢失 代码如下（vue3代码）： 动态改变canvas大小 例如: 点击按钮2秒后，改变canvas高度，会引起canvas的重新加载，导致已经绘制好的内容丢失 改变canvas高度 import { ref } from 'vue'; export default { name: 'BlurSolution', setup() { const tHeight = ref(300); const changeSize = () => { setTimeout(() => { tHeight.value = 250; }, 2000) } return { tHeight, changeSize } } } .my-btn { border: 1px solid #dfdfdf; border-radius: 4px; padding: 4px 8px; margin: 8px 0; }解决办法 利用上面复习到的getImageData和putImageData方法，改变画布前先获取画布内容，改变大小后，再复原。 动态改变canvas大小 例如: 点击按钮2秒后，改变canvas高度，会引起canvas的重新加载，导致已经绘制好的内容丢失 {{btnText}} import { onMounted, nextTick, ref } from 'vue'; export default { name: 'ChangeSize', setup() { const tHeight = ref(300), btnText = ref('改变canvas高度'); let timeOut = 3000, canvasCtx = null;; onMounted(() => { nextTick(() => { canvasCtx = document.querySelector('#text').getContext('2d'); drawText(); }) }); 重点来了 // const changeSize = () => { // 获取画布像素数据 const data = canvasCtx.getImageData(0, 0, 600, 300); btnText.value = `${timeOut / 1000}s后canvas高度改变`; const loop = setInterval(() => { console.log(timeOut) if (timeOut > 0) { timeOut -= 1000; btnText.value = `${timeOut / 1000}s后canvas高度改变`; } else { btnText.value = '改变canvas高度'; clearInterval(loop); tHeight.value = 200; // 延时操作，为了确保画布已经重新加载 setTimeout(() => {canvasCtx.putImageData(data, 0, 0)}, 0); } }, 1000); } const drawText = () => { canvasCtx.fillStyle = 'red'; canvasCtx.font = '28px sans-serif' let x = 20, y = 100; const string = 'HELLO WORLD !'; canvasCtx.fillText(string, x, y); canvasCtx.save(); } return { tHeight, btnText, changeSize } } }✨✨✨✨在项目中实际遇到的情况是这样的✨✨✨✨ 合成视频时有个时间轴，默认展示3分钟长的时间轴，当选择的视频素材总长超过3分钟时，时间轴自动延长到5分钟。 我想到的实现方法有两种： 一种是改变canvas宽度后，画布变空白后，重新绘制一个5分钟的时间轴另一种是一开始就绘制一个5分钟的时间轴，通过父级元素宽度的改变来控制展示出的时间轴长度。在绘制时间轴的时候也有遇到问题，关于canvas绘制文本和线条模糊的现象 |
【本文地址】
今日新闻 |
推荐新闻 |