canvas

全栈老石20 小时前
前端·javascript·canvas
手写无限画布4 —— 从视觉图元到元数据对象画布上的每一个像素都是稍纵即逝的,真正永恒的,是背后那套被精心设计的元数据(Metadata)规范。尽管在前面的篇章中,我们一路披荆斩棘,搞定了坐标系、渲染层和基本交互,让演示工程初具雏形。但 Canvas 本质上只是一块没有记忆的像素面板。
全栈老石1 天前
前端·javascript·canvas
手写一个无限画布 #3:如何在Canvas 层上建立事件体系你以为你点中了一个圆,其实你只是点中了一堆毫无意义的像素点。在画布里,所谓的“选中”,不过是一场精密的数学与色彩幻术。
全栈老石2 天前
javascript·canvas
手写一个无限画布 #2:渲染层的博弈:Canvas 还是 WebGL ?很多人会问:为什么不用 DOM?为什么不用 SVG?答案其实很残酷。浏览器为了渲染 DOM 和 SVG 节点,底层维护了一套极其庞大的对象模型和布局引擎。每一次你在触控板上轻轻一划,哪怕只是让相机的世界坐标移动几个像素,都可能被迫引发大量节点的重排(Reflow)与重绘(Repaint)。
全栈老石3 天前
前端·canvas
手写一个无限画布 #1:坐标系的谎言打开 Figma,或者启动蓝湖(Lanhu)查看标注,又或是打开 Lovart 开始绘图。双指捏合,画布缩小了。两指一推,画布滑到了左边。点一下那个蓝色的矩形,选中了。
子兮曰19 天前
前端·javascript·canvas
深入理解滑块验证码:那些你不知道的防破解机制你是否遇到过这样的尴尬:明明自己是个真人,却被验证码折磨得怀疑人生?据统计,传统图文验证码的用户放弃率高达40%。但你知道吗?滑块验证码背后藏着一套精密的防破解机制,它就像是一位经验丰富的安检员,在毫秒之间通过你的"微表情"判断你是不是真人。
子兮曰20 天前
前端·浏览器·canvas
深入浏览器指纹:Canvas、WebGL、Audio是如何暴露你的身份的?你以为清除了Cookie就安全了?2025年约翰霍普金斯大学的研究首次证实:浏览器指纹追踪比你想象的更普遍,而且你几乎无法阻止它。
世洋Blog1 个月前
javascript·游戏·h5·canvas
H5游戏-Canvas绘制与JS基础Promise和async await是一个东西,async await是Promise的语法糖。async await类似UnityC#的async await。
深海蓝山1 个月前
小程序·canvas·签名
基于Canvas的原生签名组件,兼容小程序和H5基于Tarojs+NutUI做移动签名时,发现原生Signature组件无法兼容UI的设计要求,事件无法自定义处理,同时又要兼容微信小程序和H5的展示。于是重新使用Canvas来生成签名。
Lsx_1 个月前
前端·javascript·canvas
案例+图解带你遨游 Canvas 2D绘图 Fabric.js🔥🔥(5W+字)Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。
似水流年_zyh2 个月前
前端·canvas
canvas写一个选择音频区域的组件
STCNXPARM2 个月前
canvas·skia·android图形库
Android14显示系统 - 图形库canvas\HWUI\skiacanvas和skia是Android图形库体系中的一部分,硬件渲染才会通过HWUI使用skia,对于图形库,我们把握框架即可
holidaypenguin2 个月前
前端·canvas
【转】跨浏览器 Canvas 图像解码终极方案:让大图渲染也能丝滑不卡顿跨浏览器 Canvas 图像解码终极方案:让大图渲染也能丝滑不卡顿Non-blocking cross-browser image rendering on the canvas - Web Performance Calendar
普兰店拉马努金2 个月前
canvas·旗帜·挪威
【Canvas与旗帜】标准比例挪威国旗
德育处主任2 个月前
前端·微信小程序·canvas
在小程序做海报的话,Painter就很给力点赞 + 关注 + 收藏 = 学会了最近做了一款粉丝向的小程序,主要功能是编辑海报信息。微信小程序提供的 Canvas 功能用起来太麻烦了,有库当然是用库易库啦~而且是越简单越好的库~
熊猫钓鱼>_>2 个月前
服务器·前端·游戏·canvas·cors·静态部署·资源路径
解决Web游戏Canvas内容在服务器部署时的显示问题在开发基于Canvas的网页游戏时,一个常见的问题是:在本地开发环境中一切正常,但将游戏部署到服务器后,Canvas内容却无法正常显示。这个问题困扰着许多Web开发者,尤其是游戏开发新手。本文将深入分析导致这一问题的各种原因,并提供系统性的解决方案。
Lsx_2 个月前
前端·javascript·canvas
案例+图解带你一文读懂Svg、Canvas、Css、Js动画🔥🔥(4k+字)动画在前端开发中扮演着重要的角色。它不仅可以提升用户体验,还可以使界面更加生动和有趣。在这篇文章中,我们将深入探讨前端动画的各种实现方式,包括 CSS 动画、JavaScript 动画、SVG 动画等。我们还将讨论一些触发动画的方式和动画在用户体验中的最佳实践。
狂龙骄子2 个月前
小程序·uniapp·canvas·clock·圆盘时钟
uniapp圆形时钟一个基于uni-app的时钟组件,通过canvas绘制模拟时钟。主要功能包括:技术要点:使用canvas API绘制图形,通过定时器实现指针动画,支持响应式设计。组件包含完整的配置选项,可灵活调整时钟外观,适用于移动端和小程序开发场景。
若梦plus2 个月前
前端·canvas
Canvas基础Canvas 是 HTML5 引入的一个强大的 2D 图形绘制 API,它为 Web 开发提供了像素级的图形控制能力。通过 Canvas,我们可以在浏览器中实现复杂的数据可视化、游戏开发、图像处理以及动画效果。
若梦plus2 个月前
前端·canvas
Canvas的未来之AI绘图、生成式视觉与XRCanvas技术正站在一个激动人心的十字路口。随着AI大模型的爆发、生成式艺术的兴起、以及XR设备的普及,Canvas不再仅仅是一个2D绘图API,而是成为了连接人工智能、算法艺术和沉浸式体验的关键桥梁。从实时AI图像生成到神经风格迁移,从WebXR空间UI到协同绘图,Canvas正在重新定义Web图形的边界。
1024肥宅2 个月前
svg·webgl·canvas
综合项目实践:可视化技术核心实现与应用优化可视化技术已成为现代前端开发不可或缺的一部分,从简单的图表展示到复杂的交互式数据可视化,再到沉浸式的3D体验,前端可视化正在重新定义用户体验。本文将全面解析可视化技术的核心实现,涵盖Canvas绘图、SVG操作、拖拽交互、动画系统、数据可视化库以及WebGL 3D渲染,通过完整可运行的代码示例,帮助你从零构建完整的可视化解决方案。