路子来源
- 一开始,想到画真龙下一百层...
- 但是,过程中遭受到了接二
- 连三的鼓励
最终决定做个《龙王变》
(一如既往的水平稳定)
效果图
由于只有画面构思,不知道怎么实现思路,简单掘金一下,找到有一篇文章作为参考...
(参考文章:产品经理:你能不能用div给我画条龙?
思路和要点
- 先获取图片的
ImageData
对象,主要为了获取该图片的像素数据。 - 再通过点阵信息遍历该图片的像素数据,匹配对应颜色的进行替换想要的效果。
- 封装了两个部分,一个部分是画点;一个是画图片;
- 画点部分增加不同透明效果,并加上定时器,每秒变换一次,达到色差实现变化;
画点部分
// 画点部分
function drawCircle(x, y, radius, color = '#f00') {
ctx.fillStyle = color
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();
};
画图部分
// 画图部分
function drawImage(url, x, y, w = 20, h = 20) {
const img = new Image();
img.crossOrigin = "anonymous";
img.src = url;
img.onload = () => {
ctx.drawImage(img, x - w / 2, y - h / 2, w, h);
};
};
主要部分,遍历图片的像素数据,进行匹配和替换想要的效果。
function drawLattice(status) {
var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
// console.log("图片信息获取", imageData)
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, image.width, image.height);
var gap = 6;
const colorCounter = {}
let targetColorCount = 0
for (var h = 0; h < image.height; h += gap) {
for (var w = 0; w < image.width; w += gap) {
var position = (image.width * h + w) * 4;
const r = imageData[position];
const g = imageData[position + 1];
const b = imageData[position + 2];
const colorKey = `${r},${g},${b}`
// console.log(colorKey);
colorCounter[colorKey] = colorCounter[colorKey] ? colorCounter[colorKey] + 1 : 1;
if (marginName === "红闪闪") {
if (colorKey === '31,26,23' || (!isFirst && colorKey !== '255,255,255')) {
targetColorCount++
drawCircle(w, h, 4, `rgba(255,0,0,${Math.random()})`)
}
} else if (marginName === "头像变") {
if (colorKey === "31,26,23") {
targetColorCount++;
const random = Math.round(Math.random() * 10000);
const imageUrl =
`https://p6-passport.byteacctimg.com/img/user-avatar/db3b09f9ca107d8843cee3fe8f4f0cd4~150x150.awebp`;
drawImage(imageUrl, w, h, 15, 15);
}
}
}
}
isFirst = false;
}
仓库地址与体验地址
大家可以直接来笔者的网站来体验
在线体验(pc端):体验传送门
仓库地址:暂无(想要的可以直接去扒笔者的网站传送门 )
感谢
文章小尾巴
文章小尾巴(点击展开)
文章写作、模板、文章小尾巴可参考:《写作“小心思”》
感谢你看到最后,最后再说两点~
①如果你持有不同的看法,欢迎你在文章下方进行留言、评论。
②如果对你有帮助,或者你认可的话,欢迎给个小点赞,支持一下~
我是南方者,一个热爱计算机更热爱祖国的南方人。
(文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。)