เมื่อเร็ว ๆ นี้ฉันเห็นการสาธิตสองครั้งแผนที่เอฟเฟกต์มีดังนี้:
วันนี้ฉันว่างในช่วงสุดสัปดาห์และใช้ผ้าใบ H5 เพื่อเลียนแบบมัน บทความนี้บรรลุการเรนเดอร์ครั้งแรกเท่านั้น
นี่คือเอฟเฟกต์ที่ฉันทำได้: หลักการดำเนินการหลักการของการดำเนินการเป็นบทความในหนังสือซึ่งไม่ได้ทำซ้ำที่นี่อีกต่อไป ทีนี้ทีละขั้นตอนเพื่อให้ได้เอฟเฟกต์นี้
ขั้นตอนในศูนย์: วาดวงกลมซอร์สโค้ดมีดังนี้:
เอฟเฟกต์การทำงานมีดังนี้:
<! /head> <body> <canvas id = canvas width = 500 height = 500> </canvas> <script> var canvas = document.getElementById ('canvas') var ctx = canvas.getConte XT ('2D') Width = 500 Canvas.height = 500 var grid = Canvas.width / 4 var cx = canvas.width / 2 // การตั้งถิ่นฐานวงกลม x พิกัด var cy = canvas.height / 2 / / {ctx.beginpath () ctx.arc ( cx, cy, grid/2, 0, 2 * math.pi)} circle () ctx.stroke () </script> </body> </html> </html> </html> </html> </html> </html> </html> </html> /html> </html> </html> </html> </html> </html>การสาธิตนี้เกี่ยวข้องกับการใช้ผ้าใบที่ง่ายที่สุด
ขั้นตอนที่ 1: วาดสติกเกอร์สีน้ำเงิน ใช้ ctx.fillText เพื่อวาดโพสต์สีน้ำเงินตรงกลางของวงกลม ข้อความหนาและแนวนอน
รหัสมีดังนี้:
ข้อความฟังก์ชั่น (FillStyle) {var fontsize = size / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'ctx.fillstyle = เติมสไตล์ ctx.filltext (' patch ' + fontsize * 0.3)} ข้อความ ('#29a3fe')เอฟเฟกต์มีดังนี้:
ขั้นตอนที่ 2: วาดคลื่นสีน้ำเงินvar wavesize = size / 6 // ขนาดของคลื่น var x = 0 // การเบี่ยงเบนตำแหน่งของคลื่นของตำแหน่งหยัก quadraticcurveto (cx + size / 4 + x + ขนาด / 2, cx + size / 2 + x + ขนาด / 2, cy) ctx.quadraticcurveto (cx + ขนาด * 3/4 + x + ขนาด / 2, cy + wavesize, cx + size + x + size / 2, cy) ctx.lineto (cx + size + x. + size / 2, canvas.head) ctx.lineto (cx -size + x + size / 2, canvas.height) ctx .lineto (cx -size + x + size / 2, cy) ctx.closepath ()} ctx .fillstyle = '#29a3fe'curve () ctx.fill ()
เอฟเฟกต์มีดังนี้:
ขั้นตอนที่ 3: วาดสติกเกอร์สีขาว curve () ctx.clip () ข้อความ ('#f00') เส้นโค้งประโยคแรก ctx.fill() curve() ctx.clip() เส้นทางที่มีรูปคลื่น (รวมถึงข้อความ) สามารถแสดงในพื้นที่ตัดเย็บได้เท่านั้น
เพื่อแยกแยะสีพื้นหลังฉันเปลี่ยนสติกเกอร์เป็นสีแดง
เอฟเฟกต์มีดังนี้:
ขั้นตอนที่ 4: วาดคลื่นกีฬา ฟังก์ชั่นลูป () {ctx.clearrect (0, 0, canvas.width, canvas.head) x -= 1.5 x = x % ขนาด ctx.save () ctx.fillstyle = e 'curve () ctx.fill () ctx .ORTORE () RequestAnimationFrame (Loop)} loop ()เอฟเฟกต์มีดังนี้:
ขั้นตอนที่ 5: รวมเนื้อหาก่อนหน้านี้เอฟเฟกต์มีดังนี้:
ขั้นตอนที่ 6: รอบตัดขั้นตอนในศูนย์:
วงกลม () ctx.stroke ()
เปลี่ยนเป็น:
วงกลม () ctx.clip ()
ด้วยวิธีนี้รูปร่างของวงกลมด้านนอกสามารถถูกตัดออกแล้วคุณสามารถทำได้
ในที่สุดแนบซอร์สโค้ดที่สมบูรณ์:
<! ccc;} </style> </head> <body> <canvas id = canvas width = 500 height = 500> </canvas> <script> var canvas = document.getElementById ('canvas') var ctx = canvas.getContext ('2d') Canvas.width = 500 Canvas.height = 500 var size = Canvas.width / 4 // ขนาดของวงกลม var cx = canvas.width / 2 // จุดกึ่งกลาง x พิกัด var cy = canvas heigh / ความสูง / 2 // วงกลมจุดกึ่งกลางจุด y พิกัด var wavesize = size / 6 // ขนาดของคลื่น var x = 0 // ตำแหน่งคลื่นฟังก์ชั่นออฟเซ็ตวงกลม () {ctx.beginpath () ctx.arc (cx, cy, ขนาด / 2, 0, 2 * math.pi)} ฟังก์ชั่นเส้นโค้ง () {ctx.beginpath () ctx.moveto (cx -size + x + ขนาด / 2, cy) ctx.quadraticcurveto (cx -size + size / 4 + 4 + x + x + size / 2, cy -wavesize, cx -size + size / 2 + x + size / 2, cy) ctx.quadraticcurveto (cx -size + size * 3/4 + x + size / 2, cy + wavesize, cx- ขนาด + size + x + size / 2, cy) ctx.quadraticcurveto (cx + size / 4 + x + size / 2, cy -wavesize, cx + size / 2 + x + size / 2, cy) ถึง (ถึง (ถึง (ถึง (ถึง (ถึง cx + size * 3 /4 + x + size / 2, cy + wavesize, cx + size + x + size / 2, cy) ctx.lineto (cx + size + x + ขนาด / 2, Canvas.Height) CTX var fontsize = size e / 250 * 120 ctx.font = 'bold' + fontsize + 'px arial' ctx.textalign = 'center' ctx.fillstyle = fillstyle ctx.filltext ('โพสต์', cx, Cy + fontsize * 0.3 03 .)} ฟังก์ชั่นลูป () {ctx.clearrect (0, 0, canvas.width, canvas.height) x -= 1.5 x = x % ขนาด ctx.save () ctx.clip () ข้อความ ('#29a3fe') ctx.fillstyle = ' #29a3fe' ctx.fill () ctx.fill () ctx.clip () ข้อความ ('#fff') ctx.restnimationframe (loip (loop)} loop () </body> </html " สรุปข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้