Canvas: Sample Code for writing the Bessel curve.

Canvas: Sample Code for writing the Bessel curve.

The sky is waiting for the rain, and I am waiting for you, la, welcome to follow my short book. Today I am sharing the original canvas imitation of the besell curve method. The details are as follows:

:

Html

<Canvas id = "mycanvas" width = "500" height = "500"> canvas is not supported in your browser. </canvas>

Css

canvas{ border: 1px solid black;}

Js

Var canvas = document. getElementById ("mycanvas"); var context = canvas. getContext ("2d"); var x1 = 100; var y1 = 100; var x2 = 400; var y2 = 400; draw (); function draw () {// draw a translucent line context. beginPath (); context. moveTo (500,0); context. lineTo (0,500); context. strokeStyle = "rgba (0,0, 0, 0.3)"; context. lineWidth = 10; context. stroke (); // draw the connection line context. beginPath (); context. VPC: moveTo (0,500); context. lineTo (x1, y1); context. lineWidth = 2; context. strokeStyle = "black"; context. stroke (); context. beginPath (); context. moveTo (500,0); context. lineTo (x2, y2); context. lineWidth = 2; context. strokeStyle = "black"; context. stroke (); // draw a red ball context. beginPath (); context. arc (x1, y1, 10, 0, Math. PI * 2); context. fillStyle = "orange"; context. fill (); // draw the blue ball context. beginPath (); context. arc (x2, y2, 10, 0, Math. PI * 2); context. fillStyle = "blue"; context. fill (); // draw the context of the besell curve. beginPath (); context. VPC: moveTo (0,500); context. bezierCurveTo (x1, y1, x2, y2, 500,0); context. lineWidth = 5; context. stroke ();} // drag the ball for animation // determine whether to drag the ball // if it is on the ball, make the animation canvas. onmousedown = function (e) {var ev = e | window. event; var x = ev. offsetX; var y = ev. offsetY; // determine whether var dis = Math is on the red ball. pow (x-x1), 2) + Math. pow (y-y1), 2); if (dis <100) {console. log ("move the mouse over the red ball"); canvas. onmousemove = function (e) {var ev = e | window. event; var xx = ev. offsetX; var yy = ev. offsetY; // clear the canvas context. clearRect (0, 0, canvas. width, canvas. height); x1 = xx; y1 = yy; // redraw draw () ;}/// determine whether the mouse is on the blue ball 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; var yy1 = ev. offsetY; // clear the canvas context. clearRect (0, 0, canvas. width, canvas. height); x2 = xx1; y2 = yy1; // redraw draw () ;}} document. onmouseup = function () {canvas. onmousemove = "";}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.