线条之美

马黑黑

线条之美

马黑黑

代码分享（全）

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: darkgray url('https://638183.freep.cn/638183/t22/51/line.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 5; }
   
3. #canv { position: relative; }
   
4. #disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; z-index: 10; animation: rot 2s linear infinite; }
   
5. #lrcbox { position: absolute; left: 60px; top: 10px;  font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
   
6. @keyframes rot { to { transform: rotate(360deg); } }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <span id="disc"></span>
    
11.         <span id="lrcbox">线条之美</span>
    
12.         <canvas id="canv" width="500" height="500"></canvas>
    
13. </div>
    
14. 
    
15. <script>
    
16. let ctx = canv.getContext('2d');
    
17. let lines = []; //线条数组
    
18. let total = 200, lineLen = canv.width / 2, idx = 0; //线条总数、线长、当前线条索引
    
19. let aud = new Audio();
    
20. 
    
21. aud.src = 'https://music.163.com/song/media/outer/url?id=1931775815.mp3';
    
22. aud.loop = true;
    
23. aud.autoplay = true;
    
24. 
    
25. disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
    
26. disc.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27. aud.addEventListener('playing',()  => disc.style.animationPlayState = 'running');
    
28. aud.addEventListener('pause',()  => disc.style.animationPlayState = 'paused');
    
29. 
    
30. function Line(x1,y1,x2,y2) {
    
31.         this.x1 = x1;
    
32.         this.y1 = y1;
    
33.         this.x2 = x2;
    
34.         this.y2 = y2;
    
35.         lines.push(this);
    
36. }
    
37. 
    
38. Line.prototype.draw = function() {
    
39.         ctx.beginPath();
    
40.         ctx.strokeStyle = this.color;
    
41.         ctx.setLineDash([1,1,1]);
    
42.         ctx.moveTo(this.x1, this.y1);
    
43.         ctx.lineTo(this.x2,this.y2);
    
44.         ctx.stroke();
    
45. }
    
46. 
    
47. 
    
48. for(let j = 0; j < total; j ++) {
    
49.         let line = new Line();
    
50.         line.x1 = lineLen;
    
51.         line.y1 = lineLen;
    
52.         let angle = j* (360 / total);
    
53.         line.x2 = rotPos(line.x1,line.y1, lineLen, angle).xx;
    
54.         line.y2 = rotPos(line.x1,line.y1, lineLen, angle).yy;
    
55. }
    
56. 
    
57. (function render() {
    
58.         let id = idx;
    
59.         if(id <= lines.length - 1) {
    
60.                 lines[id].color = '#' + Math.random().toString(16).substr(-6);
    
61.                 lines[id].draw();
    
62.         }
    
63.         idx ++;
    
64.         if(idx > lines.length) {
    
65.                 setTimeout(function() {
    
66.                         ctx.clearRect(0,0,canv.width, canv.height);
    
67.                         idx = 0;
    
68.                         render();
    
69.                 }, 4000);
    
70.         } else {
    
71.                 setTimeout(render,50);
    
72.         }
    
73. })();
    
74. 
    
75. function rotPos(x,y,r,angle) {
    
76.         let xx = x + r * Math.sin(angle * Math.PI / 180);
    
77.         let yy = y + r * Math.cos(angle * Math.PI / 180);
    
78.         return ({xx, yy});
    
79. }
    
80. </script>

复制代码

马黑黑

本帖演示：

一、画布作为帖子的一部分以插入式放置到帖子中；

二、线条组成图案

重点讲讲在画布中画线条（设画笔操作句柄是 ctx）：

先把画笔移动到起笔处(moveTo)：

ctx.moveTo(10, 50);

然后命令画笔画直线（lineTo）：

ctx.lineTo(210, 50);
ctx.sroke();

这就画出一条水平方向（自左向右）的直线，长度为 210 - 10 = 200 像素。

lineTo() 方法需要 4 个参数：x1, y1, x2, y2。x1和y1是线条起步的xy坐标，x2和y2是线条末端xy坐标。lineTo() 设置好后，紧接着要用 ctx.sroke() 方法给线条着色，线条才能显示出来。

线条颜色就是画笔颜色，要在画线之前定义。因为 lineTo() 方法需要 stroke 上色，所以定义线条颜色的语句是：

ctx.strokeStyle = 'red';

要绘制虚线线条，画布有一个命令：ctx.setLineDash([数值数组])。其参数怪异，以后在开帖专讲，这里举个例子：

ctx.setLineDash([1]);

这将令所画线条的点每隔一个像素有一个虚点且重复直至线条画完。

同样的，虚线的设置也应在画线之前做好。

红影

是线条之美，也是对称之美呢

红影

马黑黑 发表于 2022-8-21 11:02
本帖演示：

一、画布作为帖子的一部分以插入式放置到帖子中；

画布的画线条方式，学习了

樵歌

把机械美学发挥到极致，太追求完美了。将来讨个老婆一定得是宇宙花才行

马黑黑

红影 发表于 2022-8-21 11:15
是线条之美，也是对称之美呢

很对称，很美

马黑黑

樵歌 发表于 2022-8-21 11:30
把机械美学发挥到极致，太追求完美了。将来讨个老婆一定得是宇宙花才行

夸张了。你想让我发起异常特洛伊大战呀

马黑黑

红影 发表于 2022-8-21 11:17
画布的画线条方式，学习了

画线条本身是简单的，画多多的线条且构成图案还要动态去绘制，这才难

加林森

好有立体感哦。太漂亮了。

马黑黑

加林森 发表于 2022-8-21 11:34
好有立体感哦。太漂亮了。

背景图片有景深效果

加林森

马黑黑 发表于 2022-8-21 11:38
背景图片有景深效果

就是。太厉害了。佩服啊。

马黑黑

加林森 发表于 2022-8-21 11:39
就是。太厉害了。佩服啊。

你用ps一样可以营造的

加林森

马黑黑 发表于 2022-8-21 12:04
你用ps一样可以营造的

我还在学习呢。

马黑黑

加林森 发表于 2022-8-21 12:07
我还在学习呢。

严格讲是复习

加林森

马黑黑 发表于 2022-8-21 12:51
严格讲是复习

嗯嗯。

马黑黑

醉美水芙蓉 发表于 2022-8-21 20:14
真没想到原来线条也可以这么美！

嗯嗯，线条是简单的，但它们可以组合出美来

樵歌

马黑黑 发表于 2022-8-21 11:32
夸张了。你想让我发起异常特洛伊大战呀

这个可以有

青青子衿

谢谢小马黑黑老师，讲的通俗易懂。。。。。看到xx......sin......    yy...cos...俺笑得不行，不看你代码，咱都要忘了。知识运用，无所不在