canvase学习笔记

工作摸鱼之际，闲来无事之时，写了点canvas的滤镜来玩，话不多说，上效果图和源码 效果图 原图 黑白 马赛克 高斯模糊 叠加颜色蒙版 html js

分析整个水球图，波形的绘制就是整个绘制过程的最大的难点。绘制波形，第一个难点就是波纹的形状，其实可以选择两种方案绘制，第一种，采取圆弧拼接的形式；第二种就是采用三次贝塞尔曲线来绘制曲线。为了再次熟悉三次贝塞尔曲线的绘制过程，所以采用了方式二。波形的绘制难点二就是如何使得波形绘制…

在该系列的前几篇文章绘制了折线图和柱状图，其实很容易能够总结出，在canvas的绘制过程中，一个重点就是位置坐标的计算。此次我们绘制图形的数据为： 为了方便后续绘制，所以我们要先对数据进行格式化。 懒得想颜色怎么搭配，就随手写了个颜色计算的小函数，颜色的计算依据初始rgb值计算…

要达到如同上图所示的效果，首先需要解决的问题便是节点选取，我们要如何判断当前鼠标点种了节点，此次采用的办法为读取鼠标相对于当前位置相对于canvas的位置，再扫描绘制的点的位置，判断当前位置是否在某个点的附近。 因为添加hover效果只执行一次切不想被外部访问，所以定义成一个内…

其大致思路如上一篇文章一样。需要的步骤主要也是分为 在上一篇的文章基础上，为了更加优雅的代码复用，所以采用对象的方式来管理相关配置和方法。 同上一篇文章一样，为了方便后续的工作，我们需要准备相应的配置项。但此次采用了对象的方式来管理。 坐标轴的绘制和上一篇文章一样，没有什么大的…

接下来展示一如何一步一步的来绘制出如图的一个柱状图。 坐标轴的绘制主要包括了轴的绘制和标刻两个工作，x轴的绘制类似y轴绘制。但再y轴的绘制中，加入了横向的一个辅助线的绘制，采用了虚线绘制，在绘制完成后要改回实线。 x轴绘制略。 数据的绘制就是在对应位置上绘制上一个矩形。如果想会…