简易画画画板

by CosmicBear11

76 lines1.5 KB🛠️ p5.js (creative coding)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{margin:0;display:flex;justify-content:center;background:#222}
canvas{border:2px solid white}
</style>
</head>
<body>
<script>
let brushSize = 6;
let clearBtnX, smallBtnX, bigBtnX;

function setup() {
  createCanvas(650, 360);
  background(255);
  textSize(20);
  // 按钮位置
  clearBtnX = width / 2 - 90;
  smallBtnX = clearBtnX - 110;
  bigBtnX = clearBtnX + 110;
}

function draw() {
  // 底部按钮区域
  fill(40,40,40);
  rect(0, height - 60, width, 60);
  
  // 细画笔按钮
  fill(80,180,255);
  rect(smallBtnX, height-50, 90, 40, 6);
  fill(255);
  textAlign(CENTER, CENTER);
  text("细笔", smallBtnX+45, height-30);

  // 清空画布按钮
  fill(255,70,70);
  rect(clearBtnX, height-50, 90, 40, 6);
  fill(255);
  text("清空", clearBtnX+45, height-30);

  // 粗画笔按钮
  fill(60,220,120);
  rect(bigBtnX, height-50, 90, 40, 6);
  fill(255);
  text("粗笔", bigBtnX+45, height-30);
}

// 拖动画画
function mouseDragged() {
  noStroke();
  fill(0);
  circle(mouseX, mouseY, brushSize);
}

// 点击按钮功能
function mousePressed() {
  // 细画笔
  if(mouseX > smallBtnX && mouseX < smallBtnX+90 && mouseY > height-50){
    brushSize = 3;
  }
  // 清空画布
  if(mouseX > clearBtnX && mouseX < clearBtnX+90 && mouseY > height-50){
    background(255);
  }
  // 粗画笔
  if(mouseX > bigBtnX && mouseX < bigBtnX+90 && mouseY > height-50){
    brushSize = 12;
  }
}
</script>
</body>
</html>

Game Source: 简易画画画板

Creator: CosmicBear11

Libraries: p5

Complexity: moderate (76 lines, 1.5 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-cosmicbear11-mumidp35" to link back to the original. Then publish at arcadelab.ai/publish.