Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式，它可以用于动画、游戏画面、数据可视化、图片编辑等方面。

效果就如上图那样的，有个小球发射器，碰撞目标物体，碰撞了就化成星星，然后碰撞下一个，大概就像西西弗斯推石头那样周而复始。 整体框架和 连连看小游戏一样。 canvas的背景用的是渐变背景，模拟深蓝的天空。渐变背景的配色可以参考这个网站https://uigradients.co…

背景 我们用手机的摄像头自拍，很容易实现 简单的自拍效果，如复古、黑白等等。其实我们使用web端的JavaScript也是可以实现的。接下来就带领小伙伴实现一个魔法摄像头。并且提供了截图下载功能。 魔

阿最近发现的一篇超好文！前一年自己曾有开发网页手绘板，如果当时有看见它就好啦！文末的两个超6效果千万不要错过喔！p.s. 原文每个例子都附带codepen，感兴趣的话可以点进原文挨个进行试验~ 我最近在试验网页手绘的不同风格—比如顺滑笔触，贝塞尔曲线笔触，墨水笔触，铅笔笔触，印…

从0开始canvas系列从0开始canvas系列一---canvas画布从0开始canvas系列二---文本和图像从0开始canvas系列三---图像像素级操作从0开始canvas系列四---运动动画

优点：使用方便，动画的时间间隔可以自定义。 缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。与浏览器刷新频率不同步。 优点：性能更优良。隐藏浏览器标签后，便不会运行。与浏览器刷新频率同步。

一份八千字超级详细的Canvas从0到1入门指南 Canvas简介 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编

之前介绍了Canvas画图基础，这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛，和圆环结合做进度条非常酷，今天我们就来画一个这样的圆环： Canvas渐变 在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strok…

之前那篇Canvas画图-鼠标涂鸦已经可以实现与Canvas的简单交互，这篇会介绍Canvas中实现交互性的一个重要方法isPointInPath。 基本原理 Cavnas的确能实现很多很酷炫狂拽屌炸天的效果，但是交互性要差很多，简单的鼠标单击选中某个图形，都要花费一番周折。 …