ท้องฟ้ากำลังรอฝนที่มีหมอกหนา และฉันกำลังรอคุณอยู่ ลา ลา ลา ยินดีต้อนรับสู่หนังสือเล่มสั้นของฉัน สิ่งที่ฉันแบ่งปันในวันนี้คือวิธีการดั้งเดิมในการเลียนแบบเส้นโค้ง Bezier บนผืนผ้าใบ รายละเอียดมีดังนี้:
การแสดงผล:
html
<canvas id=mycanvas width=500 height=500>เบราว์เซอร์ของคุณไม่รองรับ Canvas</canvas>
ซีเอสเอส
ผ้าใบ { เส้นขอบ: 1px สีดำทึบ;}เจส
var canvas = document.getElementById(mycanvas); var บริบท = canvas.getContext(2d); var x1 = 100; var x2 = 400; var y2 = 400; /วาดเส้นกึ่งโปร่งใส context.beginPath(); context.moveTo(500,0); context.lineTo(0,500); context. strokeStyle = rgba (0,0,0,0.3); context.lineWidth = 10; context. stroke(); // วาดเส้นเชื่อมต่อ context.beginPath (); 0,500 ); context.lineTo(x1,y1); context.lineWidth = 2; context. strokeStyle = สีดำ; context.beginPath(); context.moveTo(500,0); context.lineTo(x2,y2); context.lineWidth = 2; context. strokeStyle = สีดำ; // วาดบริบทลูกบอลสีแดง BeginPath (); context.arc(x1,y1,10,0,Math.PI*2); context.fillStyle = สีส้ม; //วาดลูกบอลสีน้ำเงิน context.beginPath(); context.arc(x2,y2,10,0,Math.PI*2); context.fillStyle = blue; context.fill(); .beginPath(); context.moveTo(0,500); context.bezierCurveTo(x1,y1,x2,y2,500,0); context.lineWidth = 5; context. stroke(); } //ลากลูกบอลเพื่อทำให้เคลื่อนไหว//พิจารณาว่าจะลากลูกบอลหรือไม่//หากมันอยู่บนลูกบอล ให้เคลื่อนไหว canvas.onmousedown = function(e){ var ev = e || window .event; var x = ev.offsetX; var y = ev.offsetY; // พิจารณาว่าอยู่บนลูกบอลสีแดง var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(เมาส์อยู่บนลูกบอลสีแดง); canvas.onmousemove = function(e){ var ev = e || ; var xx = ev.offsetX; var yy = ev.offsetY; // ล้างบริบทของผ้าใบ clearRect (0,0, canvas.width, canvas.height); xx; y1 = yy; //วาดใหม่(); } } //ตรวจสอบว่าเมาส์อยู่บนลูกบอลสีน้ำเงิน var dis = Math.pow((x-x2),2) + Math.pow((y-y2 ) ,2); if(dis<100){ canvas.onmousemove = function(e){ var ev = e || window.event; var xx1 = ev.offsetX; ev.offsetY; // ล้างบริบทผ้าใบ clearRect (0,0, canvas.width, canvas.height); x2 = xx1; y2 = yy1; // วาดใหม่ (); ){ ผ้าใบ onmousemove = ;ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network