_

Canvas 碰撞检测 — 外接图形判别/光线投射/分离轴定理

碰撞检测在许多的动画与绝大多数游戏中,都会应用各种形式的碰撞检测,本文主要记录碰撞检测的原理以及应用实现。如何检测两个图形之间是否发生了碰撞,有的检测比较简单,比如矩形与矩形之间的碰撞,圆形与圆...

Canvas 精灵 - 精灵系统实现 🧚

精灵介绍精灵 是一种可以集成到动画之中图像对象,可以称为精灵图。精灵图(英语:Sprite),又被称为拼合图,是一种图片拼合技术,它就是把多张小图合成一张大图,这张大图就叫做精灵图。在计算机图形...

Canvas 动画系统 - 动画帧速率、基于时间运动、最佳实践

动画原理动画原理 —— 持续更新并绘制,这种持续持续更新与重绘就叫做动画循环,是所有动画的核心逻辑。像是 GIF 动画图片,视频播放这类我们都可以理解为是一种动画播放的过程。 在 Web 端实现...

Canvas 图像/视频处理 - 像素操作和滤镜实现

图像操作 API图像操作相关接口: drawImage() 绘制图像到 Canvas 画布,该方法有三个重载方式。 文档 getImageData() 返回一个 ImageData 对象,用于...

Canvas 图像合成与剪辑区域 - 橡皮擦实现

图像合成图像合成就是在画布上将某一个物体(源物体)绘制到另一个物体(目标物体)之上,绘制图形的叠加显示,默认情况下,浏览器会简单的将源物体叠放在目标物体上面。但是可以通过设置绘图环境对象的 gl...

Canvas 基础图形绘制 — 矩形、圆形、曲线、多边形

路径绘制在 Canvas 中绘制形状大致分为两个步骤,先是 创建路径,然后为创建的路径 填充颜色。填充颜色可以选择描边或者填充,或者两者同时应用。 CanvasRenderingContext2...

12