这个 Demo 是去年刚接触小程序没多久写的，直接扔在文件夹角落里有点可惜，就拿出来分享给刚入门的同学参考。源代码没有写备注，函数名就是备注，看函数名应该能猜到我是写什么端的😂。 文中动画都是 Canvas 绘制的，这里就不贴代码了，直接看效果图，有感兴趣的想看实现的点击这里…

王者荣耀雷达图的基本构成。 聊天记录当中的雷达图不是特别清楚，所以我这边截图了自己的一个战绩雷达图。 好了扯远了，让我们回到正题上来。 通过截图上面的雷达图基本主体是一个正六边形，每个顶点则配有相应的文字说明。 然后就是中间红色区域部分则由对角线上的点，连成一圈填充构成。因此这…

一、首先新建一个<canvas>网页元素。 上面代码中，如果浏览器不支持这个API，则就会显示<canvas>标签中间的文字——“您de浏览器不支持canvas！”。 每个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个contex…

由此，可以看到一个由小到大扩张的圆。由于没有擦除上一帧，每一帧的绘制结果都显示出来，所以呈现出来的是一个实心的圆。我想绘制的是一个闪烁的圆，那么可以把上一帧给擦除。 首先，先画一由底部到画布中央的延伸线。既然是运动的延伸线条，那起码会有一个起点坐标和一个终点坐标 如图。大概需要…

前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。 考虑到已有各轮子的契合度都不高，于是自己重新造了一个轮子。 在HTML5时代，canvas的功能已经非常强大了，可以进行像素级的操作。像图像裁剪、压缩就都是基于canvas来实现的。 关于其中原理，无非就是利用canv…

其实 canvas 本身很简单，就是去学习它的 API，多看实例，多自己动手练习，多总结。但是 canvas 的 API 实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很多的属性和方法，但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的 API，方便以后查阅，也顺便造福一下大家

canvas 动画包教不包会

现在摄像头已经是手机的标配了，移动网站也做得越来越像APP。然而拍照上传这件事情的体验似乎仍然不如APP，主要原因是现在手机拍摄的照片太大，上传非常消耗流量也非常耗时。APP都会在上传前缩小要上传的照片尺寸，以期更节省流量和时间。在HTML5时代，利用文件API和Canvas技术，Web上也可以做到图片压缩上传。 PS: 例子程序已经更新，自测能兼容我的小米上的微信6.2.5。可以点标题下的原文查看。或者直接打开http://tpjda.pwd.tw/