During my internship, I was asked to use canvas to draw an expression. It was relatively simple. I didn’t say much and went straight to the code:
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> Your browser does not support Canvas! </canvas></div><script> window. onload = function () { var canvas = document.getElementById(canvas); canvas.width = 400; canvas.height = 400; //Get context var context = canvas.getContext(2d); //The function parameters used to draw a filled circle are center coordinates, radius, starting and ending positions, line color, and fill color function drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { context.beginPath(); context.arc(x2, y2, r2, a2, b2 * Math.PI); context.strokeStyle = lineColor; context.fillStyle = FillColor; context.fill(); //Confirm filling context.stroke(); }; //The default line used to draw an arc function is black without filling. The parameters are: center x coordinate, center y coordinate, Radius, start position, end position function drawsArc(x, y, r, l1, l2) { context.beginPath(); context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI); context.strokeStyle = black; context.stroke(); }; //Function used to draw eyes function darwEyes(x1, y1, a1, b1) { //The parameters are the long axis and short axis of the ellipse center position context.strokeStyle = #754924 ParamEllipse(context, x1, y1, a1, b1); //Ellipse function ParamEllipse(context, x, y, a, b) { //Make the path (arc) drawn in each loop close to 1 pixel var step = (a > b) ? 1 / a : 1 / b; context.beginPath(); context.moveTo(x + a, y) ; //Start drawing from the left endpoint of the ellipse for (var i = 0; i < 2 * Math.PI; i += step) { //The parameter is i, indicating the degree (radians) context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.fillStyle = #754924; context.fill(); context.stroke(); }; }; / /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //Left eye context.strokeStyle = #754924 darwEyes(116, 130, 18, 25); drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); //right eye darwEyes(296, 130, 18, 25); drawCircle(290 , 127, 12, 0, 2, #754924, #F5F5F5); //Left eyebrow drawsArc(100, 100, 50, 1.3, 1.7); //Right eyebrow drawsArc(300, 100, 50, 1.3, 1.7); //Mouth drawsArc( 200, 120, 180, 0.3, 0.7); }</script></body>renderings
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.