异形布局 canvas画龙_canvas 龙

作者：笔触狂放9 | 2024-03-12 22:49:41

踩

canvas 龙

异形布局 canvas画龙

参考文章：产品经理：你能不能用div给我画条龙？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				background: #333;
			}
			.container {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				z-index: 2;
				transform: translate(-50%,-50%) scale(0.8);
			}
			#canvas {
				position: absolute;
				z-index: 1;
				filter: blur(5px);
			}
			.bubble {
				position: absolute;
				animation: floating linear infinite;
			}
			@keyframes floating {
				0% {
					transform: translateY(0px);
				}
			
				50% {
					transform: translateY(-5px);
				}
			
				100% {
					transform: translateY(0px);
				}
			}
		</style>
  </head>
  <body>
	<div class="container"></div>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
			window.onload = () => drawDragonImageInCanvas()
			
			function drawDragonImageInCanvas() {
				const c = document.querySelector('#canvas')
				const ctx = c.getContext('2d')
				const image = new Image()
				
				image.src = './long.jpg'
				image.onload = () => {
				  c.width = image.width
				  c.height = image.height
				  ctx.drawImage(image, 0, 0)
					
					const imageData = ctx.getImageData(0, 0, image.width, image.height).data
					ctx.clearRect(0, 0, image.width, image.height)
					// 像素间隔
					const gap = 8
					
					// 通过点阵信息生成气泡 DOM
					const dragonContainer = document.querySelector('.container')
					const dragonScale = 2
					for(let h = 0; h < image.height; h += gap) {
						for (let w = 0; w < image.width; w += gap) {
							const position = (image.width * h + w) * 4
							const r = imageData[position]
							const g = imageData[position + 1]
							const b = imageData[position + 2]
							// 有些图片看起来是黑色的，其实它的rgb只是接近黑色的数值而已 可以 r+g+b < 100
							if(r + g + b < 100) {
								// ctx.fillStyle = '#000'
								// ctx.fillRect(w ,h, 4,4)
								const bubble = document.createElement('img')
								bubble.src = './bubble.png'
								bubble.setAttribute('class','bubble')
								
								const bubbleSize = Math.random() * 10 + 20
								bubble.style.left = `${w * dragonScale - bubbleSize / 2}px`
								bubble.style.top = `${h * dragonScale - bubbleSize / 2}px`
								bubble.style.width = bubble.style.height = `${bubbleSize}px`
								// 动画完成的时间
								bubble.style.animationDuration = `${Math.random() * 6 + 4 }s`
								
								dragonContainer.appendChild(bubble)
							}
						}
					}
				}
			}

    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

在这里插入图片描述
素材如下：
龙
气泡

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/226275