69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||
|
|
<link rel="stylesheet" href="/css/style.css" />
|
||
|
|
<title>我的画笔</title>
|
||
|
|
<script src="/lib/p5/p5.min.js"></script>
|
||
|
|
<script src="/lib/p5/addons/p5.sound.min.js"></script>
|
||
|
|
<script src="/lib/utils.js"></script>
|
||
|
|
<script>
|
||
|
|
// 避免右键菜单
|
||
|
|
window.oncontextmenu = function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
};
|
||
|
|
|
||
|
|
let 画笔颜色 = "#333333";
|
||
|
|
const 颜色仓库 = [
|
||
|
|
"#333333", // 0 黑
|
||
|
|
"#FF0000", // 1 红
|
||
|
|
"#FF8000", // 2 橙
|
||
|
|
"#FFFF00", // 3 黄
|
||
|
|
"#00FF00", // 4 绿
|
||
|
|
"#00FFFF", // 5 青
|
||
|
|
"#0000FF", // 6 蓝
|
||
|
|
"#FF00FF", // 7 紫
|
||
|
|
];
|
||
|
|
const 画布颜色 = "#FFEECC";
|
||
|
|
const 橡皮粗细 = 20;
|
||
|
|
const 画笔粗细 = 5;
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
createCanvas(innerWidth, innerHeight);
|
||
|
|
background(画布颜色);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 不同鼠标按键对应不同的功能
|
||
|
|
function mousePressed() {
|
||
|
|
if (mouseButton == "left") {
|
||
|
|
stroke(画笔颜色);
|
||
|
|
strokeWeight(画笔粗细);
|
||
|
|
} else if (mouseButton == "right") {
|
||
|
|
stroke(画布颜色);
|
||
|
|
strokeWeight(橡皮粗细);
|
||
|
|
} else if (mouseButton == "center") {
|
||
|
|
background(画布颜色);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function mouseDragged() {
|
||
|
|
line(pmouseX, pmouseY, mouseX, mouseY);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 数字键更换画笔颜色
|
||
|
|
function keyPressed() {
|
||
|
|
const n = int(key);
|
||
|
|
if (0 <= n && n < 颜色仓库.length) {
|
||
|
|
画笔颜色 = 颜色仓库[n];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main></main>
|
||
|
|
</body>
|
||
|
|
</html>
|