Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
发布时间：2020-03-29 15:31:22 所属栏目：MySql教程 来源：站长网
导读：副标题#e# 哈哈哈俺又来啦，这次带来的是canvas实现一些画布功能的文章，希望大家喜欢！ 前言 因为也是大三了，最近俺也在找实习，之前有一个自己的小项目: https://github.com/zhcxk1998/School-Partners 面试官说可以往深层次思考一下，或许加一些新的功
|
const fillImage = async () => { // 省略一万字... img.src = await getURLBase64(fillImageSrc) img.onload = () => { const imageData: ImageData = context.getImageData(0, 0, canvas.width, canvas.height) canvasHistroyListRef.current = [] canvasHistroyListRef.current.push(imageData) setCanvasCurrentHistory(1) } } 然后我们就实现一下，画笔更新时候，我们也需要将当前的状态添加入 画笔状态列表 ，并且更新当前状态对应的下标，还需要处理一下一些细节 总结一下： 鼠标抬起时，获取当前canvas画布状态 添加进状态列表中，并且更新状态下标 如果当前处于撤销状态，若使用画笔更新状态，则将当前的最为最新的状态，原先位置之后的状态全部清空 （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
