Durante mi pasantía, me pidieron que usara un lienzo para dibujar una expresión. Fue relativamente simple. No dije mucho y fui directamente al código.
<body><div id=canvas-warp> <canvas id=canvas style=display: block; margin: 200px auto;> ¡Su navegador no admite Canvas </canvas></div><script> ventana! function () { var canvas = document.getElementById(canvas); canvas.width = 400; canvas.height = 400 //Obtener contexto var context = canvas.getContext(2d); //Los parámetros de la función utilizados para dibujar un círculo relleno son las coordenadas del centro, el radio, las posiciones inicial y final, el color de la línea y el color de relleno. función drawCircle(x2, y2, r2, a2, b2, lineColor, FillColor) { contexto.beginPath(); contexto.arc(x2, y2, r2, a2, b2 * Math.PI contexto.strokeStyle = lineColor; context.fillStyle = FillColor; context.fill(); //Confirmar el relleno context.stroke(); //La línea predeterminada utilizada para dibujar una función de arco es negra sin relleno. coordenada, radio, posición inicial, posición final función drawsArc(x, y, r, l1, l2) { context.beginPath() context.arc(x, y, r, l1 * Math.PI, l2 * Math.PI; ); context.strokeStyle = black; context.stroke(); } //Función utilizada para dibujar ojos function darwEyes(x1, y1, a1, b1) { //Los parámetros son el eje largo y el eje corto del contexto de posición del centro de la elipse .strokeStyle = #754924 ParamEllipse(context, x1, y1, a1, b1); // Función elipse ParamEllipse(context, x, y, a, b) { //Hacer que la ruta (arco) dibujada en cada bucle sea cercana a 1 píxel var step = (a > b) ? 1 / a : 1 / b; context.beginPath(); //Comience a dibujar desde el extremo izquierdo de la elipse for (var i = 0; i < 2 * Math.PI; i += step) { //El parámetro es i, que indica el grado (radianes) context.lineTo(x + un * Math.cos(i), y + b * Math.sin(i)); contexto.closePath(); contexto.fillStyle = #754924; /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200); //Contexto del ojo izquierdo.strokeStyle = #754924 ojosdarw(116, 130, 18, 25); dibujarCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); //ojo derechodarwEyes(296, 130, 18, 25); , 127, 12, 0, 2, #754924, #F5F5F5); //Dibuja la ceja izquierda(100, 100, 50, 1.3, 1.7); //Dibuja la ceja derecha(300, 100, 50, 1.3, 1.7); 200, 120, 180, 0,3, 0.7); }</script></cuerpo>representaciones
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.