Langit menunggu hujan berkabut, dan saya menunggumu, la la la, selamat datang untuk mengikuti buku pendek saya yang saya bagikan hari ini adalah metode orisinal meniru lekuk Bezier di atas kanvas. Dengan rincian sebagai berikut:
Render:
html
<canvas id=mycanvas width=500 height=500>Browser Anda tidak mendukung kanvas</canvas>
css
kanvas{ batas: 1px hitam pekat;}js
var kanvas = dokumen.getElementById(kanvas saya); var konteks = kanvas.getContext(2d); var x1 = 100; var y1 = 100; /Gambar garis semi-transparan konteks.beginPath(); konteks.moveTo(500,0); konteks.lineTo(0,500); konteks.strokeStyle = rgba(0,0,0,0.3); konteks.lineWidth = 10; konteks.stroke(); //Gambarkan garis penghubung konteks.beginPath(); 0,500 ); konteks.lineTo(x1,y1); konteks.lineWidth = 2; konteks.strokeStyle = hitam; konteks.beginPath(); konteks.moveTo(500,0); konteks.lineTo(x2,y2); konteks.lineWidth = 2; konteks.strokeStyle = hitam; BeginPath(); konteks.arc(x1,y1,10,0,Math.PI*2); konteks.fillStyle = oranye; //Gambarkan bola biru konteks.beginPath(); konteks.arc(x2,y2,10,0,Math.PI*2); konteks.fillStyle = biru; konteks.isi(); .beginPath(); konteks.moveTo(0,500); konteks.bezierCurveTo(x1,y1,x2,y2,500,0); 5; konteks.stroke(); } //Seret bola untuk dianimasikan//Tentukan apakah akan menyeret bola//Jika berada di atas bola, animasikan canvas.onmousedown = function(e){ var ev = e || window .event; var x = ev.offsetX; var y = ev.offsetY; //Tentukan apakah ada di bola merah var dis = Math.pow((x-x1),2) + Math.pow((y-y1),2); if(dis<100){ console.log(mouse ada di bola merah); canvas.onmousemove = function(e){ var ev = e || ; var xx = ev.offsetX; var yy = ev.offsetY; //Hapus konteks kanvas.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //Gambar ulang draw(); } //Tentukan apakah mouse berada pada bola biru var dis = Math.pow((x-x2),2) + Math.pow((y-y2) ) ,2); if(dis<100){ kanvas.onmousemove = fungsi(e){ var ev = e || jendela.acara; var xx1 = ev.offsetX; ev.offsetY; //Hapus konteks kanvas.clearRect(0,0,canvas.width,canvas.height); ){ kanvas.onmousemove = ;Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.