最近有个图表需求配置十分头疼。所以想手写实现一个交互体验还不错的曲线图，支持开场动画、自动根据父盒子宽度适配、比echarts更全的配置项，分区线段的可以更好的自定

之前遇到过一个面试的机试题，就是用画布绘制形状，并且支持缩放、拖拽功能。现在有点时间就分享一下我是如何一步一步完成这个功能的。看这篇信息之前最好先去看一下canvas 的 api，canvas API 穿梭机。 这里写一个 名叫 chart 的类，在 构造器 construct…

实现一个 canvas 拖拽、缩放、旋转的效果，如下效果图。 统一使用 typescript 来编写，在面对状态操作复杂的流程， ts 提供了状态标注，类型提示等。便于我们维护和梳理流程思路。比如类型标注提供了类似注释的功能，将对象描述清楚的同时，在我们使用相关属性或方法都会有…

本文是基于canvas去实现图片裁剪工具。因为canvas代码还是比较长的，尽量写思路，完整代码已放在github上。 这个是写canvas必定接触的问题，网上关于这个的答案也到处都是，就不详细介绍了。 因为canvas不是矢量图，在Retina屏下，浏览器用多个像素点去渲染一…

该文章有对应的视频讲解，大家可以动起手来，认真的学习一下canvas的用法。 每天更新前端技术栈文章。 <canvas>看起来跟img标签有点像，唯一不同的是它没有src属性和alt属性。实际上，canvas标签只有两个属性:width和height。 canvas标…

众所周知，canvas 是前端进军可视化领域的一大利器，借助 canvas 画布我们不仅可以实现许多 dom 和 css 难以实现的、各种绚丽多彩的视觉效果，而且在渲染数量繁多、内容复杂的场景下，其性能表现及优化空间也占据一定优势。 然而 canvas 却存在一个缺陷：由于 c…

Canvas是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。J…

1. 背景 之前写过一篇文章 ES6 手写一个“辨色”小游戏, 感觉好玩挺不错。岂料评论区大神频出，其中有人指出，打开控制台，输入以下代码： 即可破解，分数蹭蹭上涨，这不就是bug吗？同时评论区 【爱编程的李先森】建议，让我用 canvas 来画会更简单，因此有了这篇文章。 有…

最近对 html5小游戏有点兴趣，因为我感觉将来这个东西或许是前端一个重要的应用场景，例如现在每到某些节假日，像支付宝、淘宝或者其他的一些 APP可能会给你推送通知，然后点进去就是一个小游戏，基本上点进去的人，只要不是太抵触，都会玩上一玩的，如果要是恰好 get到用户的 G点，…