Mia Yu

浩瀚的宇宙，我们都是渺小的尘埃

js+canvas实现马赛克画笔

展示demo用一张我家孝敏美美的画报>w<~ 介绍下这款基于js和canvas实现的前端马赛克画笔，每次执行步骤都可以撤销，可反复绘制实现原理分以下几个步骤：将图片导入到canvas中: var imgObj = new Image(); imgObj.crossOrigin = "Anonymous"; //用于解决图片跨域问题，但在chrome下依旧...

Posted by Mia Yu on October 21, 2017

vue2移动端应用开发

基于vue2+webpack+vue-router+vuex开发的适用移动端的h5 app demo，包含路由的处理，上拉加载更多等功能，做的比较简洁，算是入门练习。需要注意的点无非就是要了解vue的生命周期，实例的基本属性，语法结构等，它内部封装的很多方法，用起来还是非常方便的。附上源码链接：https://github.com/yomonah/vue-demo

Posted by Mia Yu on August 26, 2017

webpack3构建react工程

第一个构建的工程中使用的webpack还是1.x版本的昨天新建个工程打算学习下g2的数据可视化开发： npm install --save-dev webpack 安装的webpack都已经是最新的3.3.0版本，不得不说学习的速度永远赶不上技术更新的速度啊。既然webpack已经下了最新版，那我就把react、babel等都安装了最新版等包，动手前确保你的node，npm版本是否支持...

Posted by Mia Yu on July 23, 2017

h5实现－简约电子请柬

h5电子请柬，懒，没做什么炫酷的动效处理，有时间的可以尝试做的炫酷一些。主要用jquery和swiper插件实现，css处理动效源码：https://github.com/yomonah/h5-mobile-web

Posted by Mia Yu on July 22, 2017

js 图片对比

利用鼠标上移、移动、移出事件来控制图片的展示，实现两图对比这个也可以用于图片的遮罩、虚化等处理 demo展示中心：https://yomonah.github.io/project/app.html#/location 源码：https://github.com/yomonah/react-demo/tree/master/src/components/picture

Posted by Mia Yu on July 21, 2017

css3 动效应用

抱歉，用工具生成的gif有点卡，小车的轮子都转不利索了，完整demo可以点击文章最底下的［demo展示中心］。这两个demo的所有元素和动效都是由html＋css实现的 css动画实现： 1.animation: css3新增属性，有多个属性值例：轮子转动 &.wheel{ left: 106px; animation: wheel 0.4s...

Posted by Mia Yu on July 21, 2017

webGL－3D贴图

上面两个例子都是应用webGL3D模型贴图实现的按照上一篇介绍的步骤： 1、先初始化场景、光源、物体 2、创建材质，在材质上添加贴图，再把材质添加到物体上，具体代码： let img = require('../../img/earth.jpg'); let material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils....

Posted by Mia Yu on June 11, 2017

webGL－入门笔记

webGL的3D世界主要由三大要素构成：场景（scene）、相机（camera）和渲染器（renderer），三者缺一不可。渲染的原理是：我们将创建的物体，添加到场景中，再通过相机（可以理解为人的视角）渲染到渲染器，从而呈现在网页中。three.js是webGL一款比较热门的类库，本文以”three.js”: “^0.77.1”版本为例，通过网上教程和自身实践整理成这篇笔记。 1.场景...

Posted by Mia Yu on April 9, 2017

微信小程序－电影资讯

微信小程序出来这么久一直都没有去关注，这两天一时兴起写了个小demo，纯入门练习。话说小程序刚出来的时候貌似挺火热，但渐渐的话题度也变淡了。我做了个类似于电影资讯的微信小程序来练手，app总共就两个界面，首页展示的是近期热映电影列表，点击详情后进入对应电影的详情页。开发步骤：下载微信web开发者工具官网链接：https://mp.weixin.qq.com/d...

Posted by Mia Yu on April 3, 2017

原生js－仿蘑菇街翻牌轮播组件

逛蘑菇街的时候看到这个效果的轮播图，就尝试着用react写了个这种效果的组件，用工具录下来的gif图有点卡，看起来不够流畅。动效主要运用css3的animation、keyframes 配置比较简单，只需要传： data:数据源，仅支持[[{},{},{}],[{},{},{}],...[{},{},{}]]的格式 activeIndex: 默认初始化开始翻牌轮播的索引 durati...

Posted by Mia Yu on March 30, 2017