商城网站很多时候会有类似刮刮乐的功能,网上看到的实现方式是通过两个canvas实现.总觉得比较low.于是自己封装了一个纯canvas底层实现刮刮乐模型当然功能没有封装的很全,比方说加个背景图/奖品为图片等等..当然这些功能都可以很简单的修改源码去实现了.下面提供一下制作思路在canvas绘制顺序应该是:绘制背景图片(这一步我没有做)->绘制蒙版->destination-out模式绘制擦除蒙版的线段->destination-over模式绘制奖品内容照例给个demo地址:刮刮乐demo效果:调用代码:/** * 刮刮卡 * @param {Object} opt * el: canvas id * text: 显示文字 * textColor: 文字颜色 默认 #000 * maskColor: 蒙版颜色 默认 #000 * lineWidth: 擦除线条宽度 默认 20 * fontStyle: 文字样式 默认 30px Georgia * callback: 用户第一次擦除回调(奖品在第一次擦除的时候获取.) * method * setValue: 奖品赋值 */ var mask = maskShape({ el: 'canvas', text: null, maskColor: "#ccc", textColor: '#000', lineWidth: 20, fontStyle: '30px Georgia', callback: function() { //第一次擦除回调函数. this指向对象本身 //return 如果奖品是第一次擦除时加载进来,在callback中写ajax取值 //如果超过200毫秒延迟体验会比较差,可以预先做一个生产队列 var self = this; setTimeout(function() { var arr = ['一等奖', '二等奖', '三等奖', '谢谢惠顾']; var z = Math.floor(Math.random() * arr.length); self.setText(arr[z]); }, 200); } }); //修改刮刮卡中值. //mask.setText('aaaa');
前端时间有在一个网站上看到css3的三维效果,感觉很棒,链接如下:NIPPON COLORS打开他的model开关,可以看到一个很炫的3D效果,下面是效果截图:是不是很棒...我也觉得很好,很心动,于是就动手模仿了.先看完成的效果吧.来看一下几个关键的部分:css3 3D效果,关键是下面几个属性,首先整个模型大概是: ...要展现3d部分的内容 ... 首先要有一个舞台:stage他有一个最重要的属性:perspective,可以理解成,观看的人,距离舞台,有多少远,比方说我这里设置了800px接着再来一个容器:container他也有一个重要的属性transform-style: preserve-3d; 告诉浏览器,这个容器是要显示3d效果的.再下面就要上具体的内容了.内容有一个重要的属性:transform他可以设置3个关键属性rotateX, rotateY, rotateZ用来判断当前物体的旋转角度如:transform: rotateX(180deg) rotateY(120deg) rotateZ(90deg) (X轴旋转180度,Y轴旋转120度,Z轴旋转90度) 然后现在就剩下最后一个关键属性了:translateZ如果不设置,那么物体就在舞台中间,也就是一开始我们给舞台设置的perspective值上,如800px数值越大,离我们就越近,当translateZ >= 800px的时候,物体就超过我们坐着的距离,就看不见他了.数值越小,离我们就越远.最终决定一个物体所在位置的4个值就是下面4个:transform: rotateX(180deg) rotateY(120deg) rotateZ(90deg) translateZ(100px)掌握上面这些,再通过css3的animation,transition两个动画神器我们就能做一点基本的小玩意啦^_^3d是不是没有想象中的那么复杂
公司同事用react做了一个颜色选择网站.还是挺不错的,拿来放自己网站下,想用颜色了可以直接找,网站链接:颜色选择页面效果:
简单封装的一个圆形显示进度条的canvas动画
紧张的10月份过去了.虽然11月份仍然很紧张,不过还是想做点自己想做的事情.时间不多,我的坦克大战小游戏依然没有时间继续开发.今天用canvas封装了一个圆形进度条显示.先给个demo链接地址:http://demo.fengyitong.name/circle_total/代码就不多说了,demo里面可以直接下载了看,代码加上空格数,注释数撑死也才200行....效果还是不错的.调用也很简单: var cx = new $.CircleAnimate({ el: doms[i], maxValue: 255, //最大值 value: 0, //当前值 color: "#fff", //外圈底色 colorAlpha: 0.8, //外圈底色透明度 outColor: "red", //外圈颜色 outAlpha: 0.5, //外圈透明度 outRadius: 0.5, //外圈内半径比 innerColor: "rgb(255,255,0)", //内圈颜色 innerAlpha: 0.7, //内圈透明度 innerScale: 0.5, //内圈半径比例 speed: 4, //速度.(每次加减值大小.) fontColor: '#000' //字体颜色. }); 接着封装了一个简单的cx.setValue(150); 来实现圆的动画效果.性能应该还可以,毕竟是canvas原生封装的.废话不多说了准备睡觉.喜欢的人可以自己下载代码.