三只萌新

项目地址中针对画板中的功能都单独做了抽离。如果想了解某个功能的话可以直接打开对应的文件查看效果。 直接给 canvas 元素设置 css 背景颜色。 使用 fill / fillRect 给画板填充颜色。 当我们使用在画板上使用 fillRect 之后，是无法再在通过 css …

今天就来好好总结下它的使用方法，也方便以后查阅。 首先我们来看下什么是 linear-gradient()，根据 MDN的定义,它是图片，我们可以通过 linear-gradient() 函数创建几种颜色过渡生成的图片。 既然函数生成的是图片，我们也可以通过 backgroun…

格式: v-focus="value" ，这里的 value 是变量名，而不是字符串。 可以看到，通过绑定 value ，指令中接收的 binding 多了个 value 的属性，值就我们传递进来的变量值。而且还多了一个 expression ,expression：字符串形式…

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

常用的 webpack.config 结构主要有 entry、output、resolve、module、plugin、optimization 这几项配置。我们来看看在 webpack-chain 中这些都是怎么配置的。 可以看到这个构造函数中有很多属性和原型上的方法,接下来…

通过 ctx.body ，拼接成一个完整的 html 字符串模版返回。 相信经过上面的代码实例可得知，即使你没有使用过 vue-ssr 的经历，但是你简单地使用过 vue 和 koa 的同学都可以看出来这个代码非常明了。 唯一要注意的地方就是，我们是通过 require('vu…

例如下图展示的点击右上方的按钮复制目标的值，我们常遇到的这样的需求。今天来梳理下有哪几种方式可以实现 注意 textarea 是没有 value 属性的，通过简单的两行代码就可以实现复制 textarea 中的内容。 更多场景我们复制的内容并不是 input/textarea …

作为前端经常遇到线上报错却无法复现的情况，要是这个时候有错误监控能快速帮我们定位问题所在，再查找错误监控的相关资料尝试去实现一个自己的sdk。下面我以 错误监控和设备信息两方面作为关注点去实现。 完整代码 通过 new Image 方式创建的元素，只需要赋值 src 属性即可发…

之前做了活动投放页面在百度、360等渠道投放，采用 koa2 + 模版引擎的方式。发现几个问题 兼容性问题，在页面中添加埋点后发现有些用户的数据拿不到，排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器。 查看下面两张图，可以看到如果是服务端渲染，那么在浏览器中…