用 Canvas 实现流星特效
最近帮公司网站 banner 实现了几个动画特效,踩了一些坑,这里 mark 下,下面给个流星 demo: <!DOCTYPE html> <html lang="en"> <head> …
Uniapp 小程序开发 Canvas 画布 生成图片 调用 ctx.draw 无反应 回调不执行 解决方法
页面分享是写在一个组件里面,ctx.draw 不执行(无绘制),ctx.draw 中完成回调不执行。但是在 H5 中可以很好的运行。 仔细翻看文档发现:文档中明确…
Canvas 画布的特效制作
经过这些实验,最终我和老朋友查尔斯·普理查德(Charles Pritchard)开始着手创建 Mugtug。我们通过 HTML5 <canvas> 创建了 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 上创建、填充图形、给图形填充渐变颜色。 组合图形(包括组合图形、图形文…