نموذج التعليمات البرمجية لتقليد قماش منحنى بيزييه

السماء تنتظر مطرًا ضبابيًا، وأنا أنتظرك، لا لا، مرحباً بكِ لمتابعة كتابي القصير، ما أشاركه اليوم هو الطريقة الأصلية لتقليد منحنيات بيزييه على القماش. التفاصيل هي كما يلي:

تقديم:

أتش تي أم أل

 <canvas id=mycanvas width=500 height=500>متصفحك لا يدعم اللوحة القماشية</canvas>

المغلق

 قماش {الحدود: 1 بكسل أسود خالص؛}

js

 var Canvas = document.getElementById(mycanvas); var context = Canvas.getContext(2d); var y1 = 100; 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(); 0,500)؛ context.lineTo(x1,y1); context.lineWidth = 2; context.strokeStyle = black; context.beginPath(); context.moveTo(500,0); context.lineTo(x2,y2); context.lineWidth = 2; context.strokeStyle = black; context.stroke(); beginPath (); context.arc(x1,y1,10,0,Math.PI*2); context.fillStyle = orange; // ارسم كرة زرقاء 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); 5; context.stroke(); } // اسحب الكرة لتحريك // تحديد ما إذا كنت تريد سحب الكرة // إذا كانت على الكرة، قم بتحريكها Canvas.onmousedown = function(e){ var ev = e || .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; 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 || var xx1 = ev.offsetX; ev.offsetY; // مسح اللوحة القماشية context.clearRect(0,0,canvas.width,canvas.height); x2 = xx1; // Redraw draw(); ){ قماش.onmousemove = }

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.