用 Canvas 实现流星特效
最近帮公司网站 banner 实现了几个动画特效,踩了一些坑,这里 mark 下,下面给个流星 demo: canvas梦幻星空背景 *{margin: 0;padding: 0;} html,bod…
Uniapp 小程序开发 Canvas 画布 生成图片 调用 ctx.draw 无反应 回调不执行 解决方法
页面分享是写在一个组件里面,ctx.draw 不执行(无绘制),ctx.draw 中完成回调不执行。但是在 H5 中可以很好的运行。 仔细翻看文档发现:文档中明确…
Canvas 画布的特效制作
经过这些实验,最终我和老朋友查尔斯·普理查德(Charles Pritchard)开始着手创建 Mugtug。我们通过 HTML5 创建了 Darkroom。Darkroom 是一款无损照片…
Three.js Canvas 画布上局部渲染 剪裁方法 .setScissor() 和视口方法 .setViewport()
通过 Three.js 渲染器 WebGLRenderer 的剪裁方法 .setScissor() 可以在canvas画布上定义一个局部矩形区域,这个矩形区可以称为剪裁框或剪裁区域。 剪…
Canvas 画布作为 Three.js 纹理贴图 CanvasTexture
Canvas 画布可以通过 2D API 绘制各种各样的几何形状,可以通过 Canvas 绘制一个轮廓后然后作为 Three.js 网格模型、精灵模型等模型对象的纹理贴图。 …
Canvas 实现类似 PS 的滤镜效果 Canvas 像素级操作
Canvas 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频…
jquery-qrcode 基于 jQuery 在浏览器里面生成二维码
jquery.qrcode.js 是用于纯浏览器 qrcode 生成的 jQuery 插件。它允许您轻松地将 qrcode 添加到您的网页中。它是独立的,minify+gzip 压缩后不到 4k,…
Cax 小程序/小游戏以及 Web 通用 Canvas 渲染引擎
特性 Learn Once, Write Anywhere(小程序、小游戏、PC Web、Mobile Web) Write Once, Run Anywhere(小程序、小游戏、Web只需要修改new Stage传入参数…
和 Transformjs 一起摇摆
记得以前 facebook 做过一款 HTML5 游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的 gif 所示: facebook 当时使用的是 createj…
Sonic.js 使用 Canvas 制作循环播放效果的动画插件
Sonic 是一个小工具,你可以用它制作循环动画,通过简单的设置即可完成流程的动画效果。 例如下面的正方形: var square = new Sonic({ width: 100, h…
用 Canvas 的 getImageData 做点有趣的事
Canvas 元素标签强大之处在于可以直接在HTML上进行图形操作,具有极大的应用价值,Canvas 可以实现对图像的像素操作,这就要说到 getImageData() 方法…
Fabric.js 简单强大的 Canvas 图形编辑库
Fabric 是一个强大而简单的 JS Canvas 库,我们能通过使用它实现在 Canvas 上创建、填充图形、给图形填充渐变颜色。 组合图形(包括组合图形、图形文…