今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦!
1. 解析图片流
canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src = require("../assets/images/base/wechat.png");//设置图片地址 img.onload = () => { //在图片加载后 content.drawImage(img, 0, 0, canvas.width, canvas.height);//将图片添加到画布,并设置宽高 imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//获取画布数据 };
imgData是什么样的呢?如下图
这是一个Uint8ClampedArray的类型化数组,这个数组出现最多的也是在imgData上。它会将负数归入0,大于255的数归入255,所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢?因为我们设置了画布长宽为310,而imgData四位代表一个rgba像素点,也就是imgData[0]是红色通道,imgData[1]是绿色通道,imgData[2]是蓝色通道,imgData[3]是透明通道…依次循环,所以310 * 310 * 4 = 384400。
2. 处理像素点,画出二维码
for (var i = 0; i < 31 * 31; i++) { //random_position为各个小平面块打乱时的位置信息,我设置小平面一共有31 * 31个 random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)]) } var color = new Array(310).fill('').map(d => []);//color设置成310个数组 for (var i = 0; i < 310; i++) { for (var j = 0; j < 310; j++) { let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2]; clr = clr > 382 "htmlcode">var pos = { time: 0 }; tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000); tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000); tween1.easing(TWEEN.Easing.Quadratic.In); tween2.easing(TWEEN.Easing.Quadratic.Out); tween1.onUpdate(onUpdate); tween2.onUpdate(onUpdate); tween1.start(); function onUpdate() { let time = this._object.time; group.children.forEach((d, i) => { d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]); }) }这部分只是用了tween的基础功能,请自行查看tween文档。
以上就是three.js 制作动态二维码的示例代码的详细内容,更多关于three.js 制作动态二维码的资料请关注其它相关文章!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]