21xrx.com
2024-09-20 06:43:47 Friday
登录
文章检索 我的文章 写文章
用Java和JavaScript轻松实现动态笑脸
2023-06-16 15:10:23 深夜i     --     --
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代码，我们可以轻松实现一个简单的动态笑脸。希望本文对大家有所帮助。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复