เมื่อเร็ว ๆ นี้ ผู้เขียนมีข้อกำหนด เนื้อหาที่ต้องการคือ: กลุ่มของข้อความจะปรากฏรอบ ๆ วงแหวน โดยที่ผู้ใช้สามารถเพิ่มข้อความได้ วางเมาส์ไว้เหนือจุดสีน้ำเงินเล็กๆ เหนือวงแหวนจะแผ่กระจายเป็นรูปสามเหลี่ยมแล้วแสดงข้อความ มาดูเอฟเฟกต์ภาพเคลื่อนไหวกันก่อน!
ดังที่แสดงในภาพด้านบน เมื่อวางเมาส์บนจุดสีน้ำเงินเล็กๆ ที่สอดคล้องกัน จะต้องปล่อยรังสีที่มีลักษณะคล้ายสามเหลี่ยมออกมา และข้อความที่เกี่ยวข้องจะปรากฏนอกรูปสามเหลี่ยม และจุดสีน้ำเงินเล็กๆ จะกลายเป็นจุดสีขาวเล็กๆ
เมื่อผู้ใช้เข้าสู่เนื้อหาด้านบน เนื้อหาจะถูกเพิ่มรอบวงแหวนด้านล่าง ดังแสดงในภาพด้านบน
แนวคิดดั้งเดิมของผู้เขียนคือการใช้ CSS เพื่อนำไปใช้ เช่นเดียวกับเมนูรองแบบไดนามิกในภาพด้านล่าง
อย่างไรก็ตาม เมื่อพิจารณาว่าเนื้อหาบนขอบของวงแหวนมีความแปรปรวนและจำเป็นต้องวางตำแหน่งรอบๆ วงแหวน จึงอาจใช้งาน CSS ได้ยาก ว้าว ผู้เขียนตัดสินใจใช้ Canvas เพื่อให้บรรลุเป้าหมาย (ผู้เขียนเพิ่งเรียน Canvas มาไม่นาน หากผิดพลาดประการใดขออภัยด้วย)
กระบวนการดำเนินการ:อันดับแรก:
ส่วน html ของโค้ดจะเป็นดังนี้:
<canvas style=margin-left: 50px;padding-top: 20px; display:block; id=canvas > เวอร์ชันปัจจุบันของเบราว์เซอร์ของคุณไม่รองรับ Canvas</canvas>
ขั้นตอนการใช้งานเฉพาะมีดังนี้:
1. วาดวงกลมขนาดใหญ่
ใช้วิธีการแคนวาส: context.arc(x, y, radius, startAngle, endAngle [, ทวนเข็มนาฬิกา]);
x, y: พิกัดศูนย์กลางวงกลม, รัศมี: รัศมีศูนย์กลางวงกลม, startAngle: การวาดเรเดียนเริ่มต้น, endAngle: การวาดเรเดียนจุดสิ้นสุด, [, ทวนเข็มนาฬิกา]: พารามิเตอร์ทางเลือก ไม่ว่าจะวาดส่วนโค้งตามเข็มนาฬิกาหรือทวนเข็มนาฬิกา
เพื่อความสะดวกในการวาดภาพ ผู้เขียนได้ย้ายต้นกำเนิดของผืนผ้าใบจากมุมซ้ายบนก่อนหน้าไปยังกึ่งกลางของผืนผ้าใบ
รัศมีของวงแหวนที่ผู้เขียนคำนวณคือ r-80
canvas.width = 500canvas.height = 500//คำนวณรัศมีของศูนย์กลางของผืนผ้าใบ ให้ r = 500 / 2//ย้ายจุดกำเนิดของผืนผ้าใบไปที่กึ่งกลางของผืนผ้าใบเมื่ออินเทอร์เฟซถูกเตรียมใช้งาน ctx.translate(r ,r) // เลื่อนแปรงเป็นวงกลม
รหัสเฉพาะมีดังนี้:
// การเริ่มต้นแคนวาส ให้ canvas = document.getElementById('canvas')let ctx= canvas.getContext('2d')let ratio = getPixelRato(ctx)canvas.width = 500canvas.height = 500//คำนวณรัศมีของจุดศูนย์กลาง ของผืนผ้าใบ ให้ r = 500 / 2// เมื่ออินเทอร์เฟซถูกเตรียมใช้งาน ให้ย้ายต้นกำเนิดของผืนผ้าใบไปที่กึ่งกลางของผืนผ้าใบ ctx.translate(r,r) //ย้ายแปรงไปที่วงกลม ctx.lineWidth = 3; //ตั้งค่าความกว้างของเส้นของแปรง ctx.beginPath(); //เริ่มแปรง//วาดสีขอบไล่ระดับสีของขอบวงกลม var arcColor = ctx.createLinearGradient(-170, -170, 0, 170)arcColor.addColorStop(0, '#8ec1ff')arcColor.addColorStop(0.2, '#83beff')arcColor.addColorStop(0.5, '#75b1ff')arcColor.addColorStop(0.7,'#5998ff')arcColor.addColorStop(1, '#2065ff')ctx .จังหวะสไตล์= arcColor;//กำหนดสีของแปรง ctx.arc(0,0,r - 80,0,2*Math.PI,false) //วาดวงกลม พิกัด 0,0 รัศมี 250-80 เต็มวงกลม (0 -360 องศา), false หมายถึง ctx.closePath()ctx. stroke() ตามเข็มนาฬิกา // การวาดภาพผลการจับสลากมีดังนี้
2. วาดภาพพื้นหลังตรงกลางวงแหวน (ที่มาของผืนผ้าใบปัจจุบันคือศูนย์กลางของผืนผ้าใบ)
DrawImage (รูปภาพ, dx, dy, dWidth, dHeight)
รูปภาพ: ทรัพยากรรูปภาพ Canvas เช่น รูปภาพ <img>, รูปภาพ SVG, องค์ประกอบ Canvas เอง ฯลฯ
dx, dy: วางแผนพื้นที่บนผืนผ้าใบ Canvas เพื่อวางรูปภาพ dx คือพิกัดแนวนอนและแนวตั้งของมุมซ้ายบนของพื้นที่นี้
dWidth, dHeight: วางแผนพื้นที่บนผืนผ้าใบเพื่อวางรูปภาพ ความกว้าง และความสูงของพื้นที่นี้
ผู้เขียนคำนวณพิกัดต่อไปนี้
ให้ image = new Image()image.src = 'image/quan.png'image.onload = () => { // ย้ายจุดเริ่มต้นไปที่กึ่งกลาง ctx.drawImage(image,-140,-140,280,280)}ผลการจับสลากมีดังนี้:
3. วาดข้อความและจุดเล็กๆ บนวงแหวน (ต้นกำเนิดของผืนผ้าใบปัจจุบันคือศูนย์กลางของผืนผ้าใบ)
การวาดเป้าหมายสำหรับข้อความและจุดเล็กๆ:
3.1 จุดเล็กๆ จะแสดงเท่าๆ กันบนวงแหวนขนาดใหญ่
3.2 ข้อความกระจายออกไปนอกจุดเล็กๆ เล็กน้อย
สารละลาย:1. ผู้เขียนใช้อาร์เรย์เพื่อจัดเก็บคำปัจจุบัน
ให้ textArr = ['ทะเลและท้องฟ้ากว้างใหญ่','ความสามารถด้านเทคนิค','เงินทุนที่แข็งแกร่ง','การควบคุมการบำรุงรักษา','ใช้ชีวิตและทำงานอย่างสงบสุขและพึงพอใจ','ชมดอกไม้','เสร็จสิ้นการตกแต่งขั้นสุดท้าย',' กำจัดขี้เถ้า ',' ต้านลม ',' การพัฒนาอาชีพ']
2. เนื่องจากจำนวนจุดเล็กๆ และจำนวนคำเท่ากัน จำนวนของทั้งสองจุดจึงเป็นความยาวของอาร์เรย์ textArr ด้านบน
3. เรเดียนของวงกลมเต็มคือ 2π เพื่อให้จุดเล็กๆ แบ่งวงแหวนเท่ากัน ผู้เขียนจะคำนวณเรเดียนของจุดที่จุดเล็กๆ แต่ละจุดตั้งอยู่ก่อน
for(let i = 0;i<lengths;i++){/ // คำนวณเรเดียน ให้ rad = 2*Math.PI/lengths*i}4. ตามฟังก์ชันตรีโกณมิติ สามารถคำนวณพิกัด (x, y) ของจุดเล็ก ๆ ปัจจุบันบนผืนผ้าใบได้ (ต้นกำเนิดของผืนผ้าใบปัจจุบันคือศูนย์กลางของผืนผ้าใบ)
ในบรรดาความสัมพันธ์ระหว่างเรเดียน จุดเล็ก วงแหวน รัศมีวงแหวน และกำเนิดผืนผ้าใบ ผู้เขียนวาดภาพเพื่ออธิบายสิ่งเหล่านี้
คำนวณพิกัดของข้อความ:
// คำนวณพิกัดของจุดศูนย์กลางของวงกลมเล็ก ให้ x = (r - 40)*Math.cos(rad)let y = (r - 40)*Math.sin(rad)
คำนวณพิกัดของจุดเล็ก: เนื่องจากจุดศูนย์กลางของจุดเล็กต้องตกบนวงแหวน พิกัดแนวนอนและแนวตั้งที่คำนวณคือ
// คำนวณพิกัดของข้อความ ให้ x = (r - 80)*Math.cos(rad) ให้ y = (r - 80)*Math.sin(rad)
รหัสเฉพาะมีดังนี้:
// วาดข้อความ ctx.font = '13px Arial'ctx.textAlign = 'center'ctx.textBaseline = 'middle'ctx.fillStyle=#000000let lengths = textArr.lengthtextArr.forEach(function(text,i){ //radians ให้ rad = 2*Math.PI/lengths*i // คำนวณพิกัดของจุดศูนย์กลางของวงกลมเล็ก ให้ x = (r - 40)*Math.cos(rad) ให้ y = (r - 40)*Math.sin(rad) ctx.fillText(text,x+0.5,y+0.5)});// วาดจุดเล็กๆ สำหรับ(ปล่อยให้ฉัน = 0;i<lengths;i++){ // // ให้ rad = 2*Math.PI/lengths*i ให้ x = (r - 80)*Math.cos(rad) ให้ y = (r - 80)*Math.sin(rad)// // วาดจุดโปร่งแสงสีเทาเล็กๆ บนขอบ ctx.beginPath() ctx.fillStyle = 'rgba(226,235,250, 0.8)' ctx.arc(x,y,8,0,2*Math.PI,false) ctx.closePath() ctx.fill() // วาดจุดสีน้ำเงินเล็กๆ ctx.beginPath() ctx.fillStyle = '#208fe5' ctx.arc(x,y,4,0,2*Math.PI,false) ctx.closePath( ) ctx .เติม() }ผลการจับสลากมีดังนี้:
4. วาดรูปสามเหลี่ยมด้านนอกจุดเล็กๆ แต่ละจุด (จุดกำเนิดของผืนผ้าใบปัจจุบันคือศูนย์กลางของผืนผ้าใบ)
4.1 เนื่องจากคุณต้องการวาดรูปสามเหลี่ยม แนวคิดในการวาดภาพสามเหลี่ยมคือลากเส้นทั้งสองข้างโดยให้จุดศูนย์กลางของจุดเล็กๆ ปัจจุบันเป็นจุดเริ่มต้น จากนั้นใช้ ctx.fill() เพื่อปิดรูปร่างและ เติมเต็มการตกแต่งภายในด้วยการไล่ระดับสี
วาดรูปสามเหลี่ยม: พิกัดจะคำนวณด้วยตัวเอง ผู้เขียนบวกลบ 35 บน abscissa และ 70 บนตัวกำหนด (แล้วแต่ชอบ 555)
//เริ่มแปรง ctx.beginPath() ctx.moveTo(x,y) ctx.lineTo(x-35,y+70) ctx.lineTo(x+35,y+70) ctx.closePath()
วาดข้อความใต้สามเหลี่ยม: (เพื่อแยกความแตกต่างจากข้อความก่อนหน้า ฉันใช้สีแดงสำหรับข้อความที่นี่)
ctx.fillStyle= '#e3211c' ctx.fillText(textArr[i],x,y+75)
รหัสเฉพาะมีดังนี้:
สำหรับ (ให้ i = 0;i<ความยาว;i++){ // // ให้ rad = 2*Math.PI/lengths*i ให้ x = (r - 80)*Math.cos(rad) ให้ y = (r - 80)*Math.sin(rad) // // วาดรูปสามเหลี่ยม // // ctx.rotate( -Math.PI / 4) ctx.beginPath() //เริ่มใช้แปรง ctx.moveTo(x,y) ctx.lineTo(x-35,y+70) ctx.lineTo(x+35,y+70) ctx.closePath() // // ตั้งค่าการไล่ระดับสี- - ->เพิ่มสีจากกึ่งกลางไปทั้งสองด้าน var sColor = ctx.createLinearGradient (x,y,x+18,y+50) sColor.addColorStop(0,'rgba(106,128,243,0.5)') sColor.addColorStop(0.6,'rgba(83,183,243,0.5)') sColor.addColorStop(0.7,'rgba(129,200,224,0.5)') sColor.addColorStop(0.8,'rgba(130,219,251,0.5)') sColor.addColorStop(1,'rgba(195,228,223,0.5)') ctx.fillStyle= sColor ctx.fill() ctx.fillStyle= '#e3211c' ctx.fillText(textArr[i],x,y+75)}ผลการจับสลากมีดังนี้:
4.2 ข้อกำหนดคือ ทิศทางของสามเหลี่ยมแต่ละอันต้องกางออกไปด้านนอก และตอนนี้ทิศทางของสามเหลี่ยมนั้นคว่ำลง ดังนั้นตอนนี้คุณต้องใช้วิธีการหมุนผืนผ้าใบ
ctx.save() ctx.translate(x,y) // มุมการหมุนอยู่กึ่งกลางจุดเล็กแต่ละจุด ctx.rotate( rad - Math.PI/2 ) // เพราะจุดเล็ก ctx.translate(- x, - y) ละเว้นโค้ดสำหรับวาดรูปสามเหลี่ยมและข้อความ
จากการคำนวณจะเห็นได้ว่าการเอาจุดศูนย์กลางของจุดเล็กเป็นจุดเริ่มต้นของการหมุน ส่วนโค้งของการหมุนของสามเหลี่ยมควรเป็นส่วนโค้งของจุดเล็กปัจจุบันลบ π/2 เพราะตำแหน่งเริ่มต้นของการหมุนเสมอ เริ่มจากทิศทางบวกของแกนพิกัด x นั่นคือมันเริ่มต้นที่ 0 เรเดียน แต่ตอนนี้สามเหลี่ยมทั้งหมดอยู่ที่ π/2 เรเดียน ดังนั้น:
เรเดียนของการหมุน = เรเดียนของจุดเล็ก - π/2
อย่าลืมใช้วิธีการจัดเก็บสถานะ Canvas save() เมื่อหมุน
Restore() จะแสดงสถานะ Canvas ที่เก็บไว้จากด้านบนของสแต็กตามลำดับ หากไม่มีสถานะ Canvas ที่เก็บไว้ จะไม่มีการเปลี่ยนแปลงในการดำเนินการวิธีนี้
อย่าลืมใช้เมธอด Restore() ในตอนท้าย ณ จุดนี้ ผู้เขียนต้องเสียน้ำตาด้วยความเสียใจ - -
รหัสเฉพาะ:
สำหรับ (ให้ i = 0;i<ความยาว;i++){ // // ให้ rad = 2*Math.PI/lengths*i ให้ x = (r - 80)*Math.cos(rad) ให้ y = (r - 80)*Math.sin(rad) // วาดรูปสามเหลี่ยม s ctx.save() // มุมการหมุนอยู่ตรงกลางจุดเล็กๆ แต่ละจุด เพราะจุดเล็กๆ อยู่ที่จุดเริ่มต้น ctx.translate(x,y) ctx.rotate( rad - Math.PI/2 ) ctx.translate(-x, -y) // เริ่มแปรง ctx.beginPath() ctx.moveTo(x,y) ctx.lineTo(x-35,y+ 70 ) ctx.lineTo(x+35,y+70) ctx.closePath() //ตั้งค่าการไล่ระดับสี--->เพิ่มสี var จากกึ่งกลางไปทั้งสองด้าน sColor = ctx.createLinearGradient (x,y,x+18,y+50) sColor.addColorStop(0,'rgba(106,128,243,0.5)') sColor.addColorStop(0.6,'rgba(83,183,243,0.5)') sColor.addColorStop(0.7,'rgba(129,200,224,0.5)') sColor.addColorStop(0.8,'rgba(130,219,251,0.5)') sColor.addColorStop(1,'rgba(195,228,223,0.5)') ctx.fillStyle= sColor ctx.fill() ctx.fillStyle= '#e3211c' ctx.fillText(textArr[i],x,y+75) ctx.restore()}พล็อตผลลัพธ์:
ลองมองดูใกล้ๆ หน่อยว่าอะไร? - - ข้อความบางส่วนกลับหัวเนื่องจากปัญหาการหมุน จากการสังเกต ผลลัพธ์ก็คือเมื่อเรเดียนมากกว่า π ข้อความจะกลับหัว
ถึงเวลาที่จะเขียนกระแสของการตัดสิน - - -
วิธีหมุนข้อความ:
ฟังก์ชั่นหมุนบริบท (ctx, x, y, องศา) { // หมุนข้อความ ctx.translate (x, y) // ctx.rotate (องศา * Math.PI / 180) ctx.rotate (องศา) ctx.translate (-x , -y) }กำหนดจุดเล็กๆ ที่มีเรเดียนมากกว่า π
if (rad > Math.PI) { // เนื่องจากจำเป็นต้องแสดงข้อความที่ขอบของสามเหลี่ยม ข้อความจึงควรหมุนตามรูปสามเหลี่ยมเพื่อให้สามารถคงไว้ที่ // ขอบของรูปสามเหลี่ยมได้เสมอ หลังจากหมุนแล้ว ข้อความจะปรากฏขึ้นเมื่อเรเดียนมากกว่า π ย้อนกลับปัญหา ดังนั้นให้หมุนข้อความ ctx.save() ctx.beginPath() // หมุนข้อความ rotContext(ctx, x, y+75, Math.PI) ctx.font = '13px อาเรียล' ctx.textAlign = 'center' ctx.fillStyle = #ff2238 ctx.fillText(textArr[i], x, y+ 75) ctx.restore()} else { ctx.fillStyle = '#ff2238' ctx.fillText(textArr[i) ], x, ย + 75)}ผลการจับสลากมีดังนี้:
มองไปข้างหน้าเพื่อชัยชนะเราเกือบจะประสบความสำเร็จแล้ว. อย่างน้อยเราก็ยังมีแผนคร่าวๆ อยู่. และสหายยังต้องทำงานหนัก! -
5. ต่อไปนี้คือการดำเนินการ เมื่อเมาส์อยู่เหนือจุดเล็ก ๆ สามเหลี่ยมที่ขอบและข้อความที่ขอบของสามเหลี่ยมจะปรากฏขึ้น แต่ข้อความที่ขอบของวงกลมจะไม่แสดง
ความคิด:1. ผูกเหตุการณ์การป้อนเมาส์เข้ากับแคนวาส
2. ตรวจสอบว่าพิกัดของตำแหน่งเมาส์ปัจจุบันบนผืนผ้าใบเท่ากับพิกัดใกล้จุดเล็กหรือไม่ หากเป็นเช่นนั้น ให้แสดงรูปสามเหลี่ยมที่สอดคล้องกับจุดเล็ก
5.1 ผูกเหตุการณ์ mousemove เข้ากับผืนผ้าใบ: เมาส์อยู่เหนือเหตุการณ์
canvas.addEventListener('mousemove',clickEvent)5.2 คำนวณพิกัดปัจจุบันของเมาส์บนผืนผ้าใบ
วิธีการคำนวณคือ: ใช้พิกัดปัจจุบันของเมาส์บน DOM เพื่อลบระยะห่างจากด้านซ้ายหรือด้านบนของผืนผ้าใบเพื่อคำนวณระยะห่างของผืนผ้าใบ
วิธี DrawOne ในรูปด้านล่างเป็นวิธีการวาดภาพ ซึ่งจะกล่าวถึงในบทความต่อไป
function clickEvent() { // พิกัดของตำแหน่งเมาส์ ให้ x = event.clientX - canvas.getBoundingClientRect().left ให้ y = event.clientY - canvas.getBoundingClientRect().top DrawOne(x,y)}5.3 เนื่องจากพิกัดของเมาส์บนผืนผ้าใบที่คำนวณข้างต้นคำนวณโดยมุมซ้ายบนของผืนผ้าใบเป็นจุดเริ่มต้น แต่ที่มาของผืนผ้าใบปัจจุบันได้ย้ายไปที่กึ่งกลางผืนผ้าใบแล้ว (250,250) ดังนั้นเมื่อใช้ เพื่อตรวจสอบว่าการคลิกเป็นจุดเล็กๆ หรือไม่ คุณต้องลบ 250 จากพิกัดทั้งแนวนอนและแนวตั้งเพื่อเปรียบเทียบกับพิกัดของจุดเล็กๆ บนผืนผ้าใบปัจจุบัน ตอนที่ฉันตัดสิน ฉันพบปัญหา ฉันไม่รู้ว่าทำไมทิศทาง y ถึงแตกต่างกัน ของผู้เขียนคือ 260 แทนที่จะเป็น 250. ผู้เขียนจึงลบ 260 ในทิศ y.
รหัสมีดังนี้:
ในหมู่พวกเขา Cx, Cy คือพิกัดของเมาส์บนผืนผ้าใบ (มุมซ้ายบนของผืนผ้าใบคือจุดเริ่มต้น), x, y คือพิกัดของจุดเล็ก ๆ ในปัจจุบัน
ผู้เขียนคำนวณโดยตรงถึงตำแหน่ง 15px ใกล้กับศูนย์กลางของจุดเล็กๆ และสามเหลี่ยมทั้งหมดก็ปรากฏขึ้น และจุดเล็กๆ กลายเป็นสีขาว
สิ่งที่สำคัญที่สุดคือคุณจะต้องเคลียร์แคนวาสก่อนหน้าทุกครั้งที่คุณวาดใหม่: อย่าลืมใช้เมธอด clearRect เพื่อเคลียร์แคนวาส
ให้ XX = Cx - 250 ให้ YY = Cy- 260 ให้ซ้าย X = x - 15 ให้ขวา X = x + 15 ให้ด้านบน Y = y - 15 ให้ด้านล่าง Y = y + 15if (XX >= ซ้ายX && XX <= rightX && YY <= ด้านล่างY && YY > = topY ) {//มันถูกคลิก - - - - - //เขียนโค้ดรูปวาดตรงกลาง}รหัสจะตามด้วยลิงค์:
6. กำหนดอินพุตบนอินเทอร์เฟซและผูกเหตุการณ์การเปลี่ยนแปลงเข้ากับอินพุต
การใช้งาน: อินเทอร์เฟซจะถูกวาดใหม่ทุกครั้งที่ค่าในอินพุตเปลี่ยนแปลง
รหัสเอชทีเอ็ม:
<input type=text id=inpt style=margin-left: 100px;margin-top: 50px placeholder=กรุณาระบุ...>
รหัส js:
ให้ inpt = document.getElementById('inpt') inpt.addEventListener('change', function () { if (inpt.value !== '') { textArr.push(inpt.value) DrawAll(2) //This วิธีการคือวิธีการวาด ซอร์สโค้ดจะได้รับในภายหลังในบทความ}})7. มีปัญหา ทุกครั้งที่คุณคลิกที่อินเทอร์เฟซและวาดอินเทอร์เฟซใหม่ จะมีสถานการณ์กะพริบ
ดังที่แสดงด้านล่าง:
ทุกครั้งที่คุณเลื่อน เนื่องจากพิกัดของเมาส์เปลี่ยนไป คุณจะต้องล้างเนื้อหารอบๆ วงแหวนและวาดใหม่ ดังนั้นคุณต้องเคลียร์พื้นที่ว่างเพื่อให้ได้เอฟเฟกต์ไดนามิก
clearRect() มักใช้ในการวาดภาพแอนิเมชั่น Canvas โดยจะล้างเนื้อหาแคนวาสอย่างต่อเนื่อง จากนั้นจึงวาดเพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหว
clearRect() สามารถทำให้พื้นที่สี่เหลี่ยมในผืนผ้าใบขององค์ประกอบ Canvas โปร่งใสได้
context.clearRect(x, y, ความกว้าง, ความสูง);
x, y: พิกัด x, y ของมุมซ้ายบนของสี่เหลี่ยม
ความกว้าง ความสูง: ความกว้างและความสูงของพื้นที่สี่เหลี่ยมที่เคลียร์
เนื่องจาก clearRect() สามารถเคลียร์ได้เฉพาะพื้นที่สี่เหลี่ยมของผืนผ้าใบเท่านั้น ทุกครั้งที่เคลียร์ ภาพพื้นหลังที่อยู่ตรงกลางจะถูกเคลียร์พร้อมกัน
ดังนั้นจึงต้องโหลดภาพพื้นหลังใหม่ทุกครั้ง และต้องใช้เวลาพอสมควรในการโหลดภาพ ดังนั้นภาพจะกะพริบทุกครั้งที่ปรากฏ
สารละลาย:DrawImage (รูปภาพ, dx, dy, dWidth, dHeight)
รูปภาพพารามิเตอร์: ทรัพยากรรูปภาพ Canvas เช่น รูปภาพ <img> รูปภาพ SVG องค์ประกอบ Canvas เอง ฯลฯ
จากนั้นคุณสามารถใช้แคนวาสอื่นเพื่อแคชรูปภาพได้
ใช้ผืนผ้าใบเพิ่มเติมเพื่อวาดภาพพื้นหลัง แต่สำหรับผืนผ้าใบนั้นที่ไม่แสดงในอินเทอร์เฟซ: display:none จากนั้นใช้เพื่อล้างผืนผ้าใบและแสดงผลออบเจ็กต์ผืนผ้าใบที่แคชไว้โดยตรงตรงกลางผืนผ้าใบที่จะแสดง คือไม่จำเป็นต้องโหลดภาพครั้งเดียวใช้เวลานาน
รหัสเอชทีเอ็ม:
<canvas width=280 height=280 style=margin-left: 50px;padding-top: 20px; display:none; id=canvas2> </canvas>
รหัส js:
//ใช้แคชเพื่อแก้ปัญหาการกะพริบของภาพที่วาดใหม่ var tempCanvas = document.getElementById('canvas2')const tempCtx = tempCanvas.getContext('2d')tempCanvas.width = 280; tempCanvas.height = 280let image = new Image( )image.src = 'image/quan.png'image.onload = () => { // จุดเริ่มต้นย้ายไปที่กึ่งกลาง tempCtx.drawImage(image,0,0,280,280)}หลังจากเคลียร์แคนวาสแล้ว ให้วาดรูปแคช:tempCanvas โดยตรงเมื่อวาดภาพใหม่
// วาดผ้าใบแคชโดยตรงไปยังอินเทอร์เฟซ (อินเทอร์เฟซยางกลางถูกแคชไว้) ctx.drawImage(tempCanvas,-140,-140)
โอเค ฉันทำสำเร็จ นี่คือภาพผลลัพธ์:
ที่อยู่ซอร์สโค้ดมีดังนี้:
https://github.com/Linefate/Dynamic-effect-of-canvas-ring.git
สรุปข้างต้นคือคำแนะนำของบรรณาธิการเกี่ยวกับการใช้ html5 canvas ในการวาดภาพเคลื่อนไหวแบบวงแหวน ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!