Во время стажировки меня попросили использовать холст для рисования выражения. Это было относительно просто, я не стал много говорить и сразу перешел к коду.
<body><div id=canvas-warp> <canvas id=canvas style=display: block; Margin: 200px auto;> Ваш браузер не поддерживает окно Canvas! </canvas></div><script> onload =. function () { var Canvas = document.getElementById(canvas); Canvas.width = 400; //Получаем контекст var context = Canvas.getContext(2d); //Параметры функции, используемые для рисования заполненного круга, — это координаты центра, радиус, начальная и конечная позиции, цвет линии и цвет заливки 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(); // Подтверждаем заполнение context.stroke() } // Линия по умолчанию, используемая для рисования функции дуги, является черной без заполнения. координата, радиус, начальная позиция, конечная позиция функция 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 darwEyes(x1, y1, a1, b1) { //Параметры — длинная и короткая оси контекста положения центра эллипса. .strokeStyle = #754924 ParamEllipse(context, x1, y1, a1, b1); //Эллипсная функция ParamEllipse(context, x, y, a, b) { //Сделать путь (дугу), нарисованный в каждом цикле, близким к 1 пикселю var step = (a > b) ? 1 / a : 1 / b; context.moveTo(x + a, y) ; //Начинаем рисовать с левой конечной точки эллипса for (var i = 0; i < 2 * Math.PI; i += шаг) { //Параметр i, указывающий градус (радианы) context.lineTo(x + а * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.fillStyle = #754924; context.fill() }; /face drawCircle(200, 200, 200, 0, 2, #EEE685, #FCF200 //Левый глаз context.strokeStyle =); #754924 darwEyes(116, 130, 18, 25); drawCircle(110, 127, 12, 0, 2, #754924, #F5F5F5); //правый глаз darwEyes(296, 130, 18, 25); , 127, 12, 0, 2, #754924, #F5F5F5); //Левая бровь рисуетArc(100, 100, 50, 1.3, 1.7); //Правая бровь рисуетArc(300, 100, 50, 1.3, 1.7); //Рот рисуетArc( 200, 120, 180, 0,3, 0.7); </script></body>визуализации
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.