Пример кода для имитации кривой Безье на холсте

Небо ждет туманного дождя, а я жду вас, ла-ла-ла, добро пожаловать в мою небольшую книгу. Сегодня я делюсь оригинальным методом имитации кривых Безье на холсте. Подробности следующие:

Рендеринг:

HTML

 <canvas id=mycanvas width=500 height=500>Ваш браузер не поддерживает холст</canvas>

CSS

 холст { граница: 1 пиксель, сплошной черный;}

js

 var Canvas = document.getElementById(mycanvas); var context = Canvas.getContext(2d); var x1 = 100; var x2 = 400; функция draw(){ / /Рисуем полупрозрачную линию 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.stroke(); 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 = оранжевый; context.fill(); //Рисуем синий шар 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 || window.event ; var xx = ev.offsetX; var yy = ev.offsetY; // Очищаем холст context.clearRect(0,0,canvas.width,canvas.height); xx; y1 = yy; //Перерисовка draw(); } } //Определяем, находится ли мышь на синем шаре 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; // Очищаем холст context.clearRect(0,0,canvas.width,canvas.height); x2 = xx1; y2 = yy1; //Перерисовываем draw(); ) { холст.onmousemove = ;

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.