用Java和JavaScript轻松实现动态笑脸 |21xrx.com

用Java和JavaScript轻松实现动态笑脸

2023-06-16 15:10:23 深夜i 13 0

Java代码

JavaScript动态, 笑脸

Java和JavaScript作为web开发中不可或缺的两门编程语言，都有着各自的特点和优势。今天，我们来介绍一下如何用这两门语言来实现一个简单的动态笑脸。

首先介绍Java代码部分。我们需要用到Java中的Graphics2D类来绘制笑脸。代码如下：

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class SmileyFace extends JPanel {
 /**
  *
  */
 private static final long serialVersionUID = 1L;
 @Override
 public void paintComponent(Graphics g) {
  super.paintComponent(g);
  Graphics2D g2d = (Graphics2D) g;
  g2d.setColor(Color.YELLOW);
  g2d.fillOval(10, 10, 200, 200);
  g2d.setColor(Color.BLACK);
  g2d.fillOval(55, 65, 30, 30);
  g2d.fillOval(135, 65, 30, 30);
  g2d.fillOval(50, 110, 120, 60);
  g2d.setColor(Color.YELLOW);
  g2d.fillRect(50, 110, 120, 30);
  g2d.fillOval(50, 120, 120, 40);
 }
 public static void main(String[] args) {
  JFrame frame = new JFrame("Smiley Face");
  frame.add(new SmileyFace());
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.setSize(300, 300);
  frame.setLocationRelativeTo(null);
  frame.setVisible(true);
 }
}

上述代码实现了一个简单的黄色笑脸，其中细节用黑色进行绘制。接下来，我们需要用JavaScript来为这个笑脸添加动态效果。我们可以用下面的JavaScript代码来实现动态效果：

var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var eye1Pos = [85, 80];
var eye2Pos = [165, 80];
var px = 100;
var py = 130;
function draw() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 drawFace();
 drawEyes();
 drawMouth(px, py);
}
function drawFace() {
 ctx.beginPath();
 ctx.arc(100, 100, 90, 0, 2 * Math.PI);
 ctx.fillStyle = "#ffda91";
 ctx.fill();
}
function drawEyes() {
 var eyeRadius = 5;
 var eyeOffsetX = [17, 22];
 var eyeOffsetY = [13, 13];
 ctx.beginPath();
 ctx.arc(eye1Pos[0], eye1Pos[1], eyeRadius, 0, 2 * Math.PI);
 ctx.arc(eye2Pos[0], eye2Pos[1], eyeRadius, 0, 2 * Math.PI);
 ctx.fillStyle = "#000000";
 ctx.fill();
 ctx.beginPath();
 ctx.arc(eye1Pos[0] + eyeOffsetX[0], eye1Pos[1] + eyeOffsetY[0], eyeRadius - 3, 0, 2 * Math.PI);
 ctx.arc(eye2Pos[0] + eyeOffsetX[1], eye2Pos[1] + eyeOffsetY[1], eyeRadius - 3, 0, 2 * Math.PI);
 ctx.fillStyle = "#ffffff";
 ctx.fill();
}
function drawMouth(x, y) {
 var mouthWidth = 20;
 var mouthEndY = 130;
 var mouthEndX = 90;
 var mouthStartY = 125;
 var mouthCpY = mouthEndY + 60;
 var cpXOffset = x - 90;
 var cpYOffset = y - mouthEndY;
 var cp1x = mouthEndX - cpXOffset;
 var cp1y = mouthCpY - cpYOffset;
 var cp2x = mouthEndX + cpXOffset;
 var cp2y = cp1y;
 ctx.beginPath();
 ctx.moveTo(mouthEndX, mouthStartY);
 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, mouthEndX + mouthWidth, mouthStartY);
 ctx.lineWidth = 3;
 ctx.lineCap = "round";
 ctx.lineJoin = "round";
 ctx.strokeStyle = "#000000";
 ctx.stroke();
}
function mousemove(event) {
 var rect = canvas.getBoundingClientRect();
 px = event.clientX - rect.left;
 py = event.clientY - rect.top;
 draw();
}
canvas.addEventListener('mousemove', mousemove);
draw();

上述代码可以让我们通过鼠标的移动来改变笑脸的嘴巴形状，从而实现动态效果。

通过以上的Java和JavaScript代码，我们可以轻松实现一个简单的动态笑脸。希望本文对大家有所帮助。

上一篇: idea打包java可执行jar包

下一篇: Java开发，哪家公司待遇好且稳定？

评论区

相似文章