qrhlhplhp/webs
qrhlhplhp/webs
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add pain tool

Browse Source
This commit is contained in:
qrhlhplhp 2022-10-27 16:24:28 +09:00
parent d801040974
commit 656fef9996
6 changed files with 170 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

2
index.html
View File

@ -4,11 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Qrhlhplhp's Works</title> <title>Qrhlhplhp's Works</title>
</head> </head>
<body> <body>
<h1>Qrhlhplhp's Works</h1> <h1>Qrhlhplhp's Works</h1>
<h2>APPLE PER MAN CALCULATOR</h2><a href="APMC/">Link</a> <h2>APPLE PER MAN CALCULATOR</h2><a href="APMC/">Link</a>
<h2>BACH=DEMO MACHINE</h2><a href="bahdem/">Link</a> <h2>BACH=DEMO MACHINE</h2><a href="bahdem/">Link</a>
<h2>PAIN TOOL</h2><a href="pain/">Link</a>
</body> </body>
</html> </html>

7
main.css Normal file
View File

@ -0,0 +1,7 @@
h1{
color:white;
background-color:black;
}
h2{
color:red;
}

18
pain/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Pain</title>
</head>
<body>
<h1 id ="head">This is a PAIN TOOL</h1>
<button id="save">Save the picture</button>
<input type="color" id="colorele">
<input type="range" id ="rangele" min="1" max="500" value="50">
<div style="margin-bottom: 5vh; margin-top: 5vh;"><button id="button">T</button></div>
<canvas id="canvas" style="width:90vw ; border:5px solid black;"></canvas>
</body>
<script src="main.js"></script>
</html>

128
pain/main.js Normal file
View File

@ -0,0 +1,128 @@
const button = document.getElementById("button");
const canvas = document.getElementById("canvas");
const title = document.getElementById("title");
const head = document.getElementById("head");
const colorele = document.getElementById("colorele");
const rangele = document.getElementById("rangele");
const save = document.getElementById("save");
const ctx = canvas.getContext("2d");
let power = 1920 / canvas.clientWidth;
let isDrawing = false;
let x = 0;
let y = 0;
let t =false;
let color = "#000000";
let bold = 50;
let image = new Image();
canvas.width = 1920;
canvas.height = 1080;
image.src = "the pain.jpg";
image.onload = () => {
pain();
}
const start =e => {
if(e.type=="mousedown"){
x = e.offsetX * power;
y = e.offsetY * power;
}else{
x = fixPosX(e.touches[0].pageX);
y = fixPosY(e.touches[0].pageY);
}
isDrawing = true;
};
const move = e => {
if (isDrawing === true) {
if(e.type=="mousemove"){
drawLine(ctx, x, y, e.offsetX * power, e.offsetY * power);
x = e.offsetX * power;
y = e.offsetY * power;
}else{
e.preventDefault();
drawLine(ctx, x, y, fixPosX(e.touches[0].pageX), fixPosY(e.touches[0].pageY));
x = fixPosX(e.touches[0].pageX);
y = fixPosY(e.touches[0].pageY);
}
}
};
const end = e => {
if (isDrawing === true) {
if(e.type=="mouseup"){
drawLine(ctx, x, y, e.offsetX * power, e.offsetY * power);
}
x = 0;
y = 0;
isDrawing = false;
}
};
colorele.addEventListener('change', e => {
color = e.target.value;
});
rangele.addEventListener('change', e => {
bold = e.target.value;
});
save.addEventListener("click",()=>{
let element = document.createElement('a');
element.href = canvas.toDataURL('image/png');
element.download = title.innerText + '.png';
element.target = '_blank';
element.click();
});
button.addEventListener('click',()=>{
if(!t){
canvas.addEventListener('mousedown', start);
canvas.addEventListener('touchstart', start);
canvas.addEventListener('mousemove', move);
canvas.addEventListener('touchmove', move);
window.addEventListener('mouseup', end);
window.addEventListener('touchend', end);
window.addEventListener('touchcancel', end);
ctx.clearRect(0, 0, canvas.width, canvas.height);
title.innerText = "Paint";
head.innerText = "This is a PAINT TOOL";
t = true;
}else{
canvas.removeEventListener('mousedown', start);
canvas.removeEventListener('touchstart', start);
canvas.removeEventListener('mousemove', move);
canvas.removeEventListener('touchmove', move);
window.removeEventListener('mouseup', end);
window.removeEventListener('touchend', end);
window.removeEventListener('touchcancel', end);
pain();
title.innerText = "Pain"
head.innerText = "This is a PAIN TOOL"
t = false;
}
} );
window.onresize = () =>{
power = 1920 / canvas.clientWidth;
};
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = color;
context.lineWidth = bold;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
function fixPosX(posX){
const bcr = canvas.getBoundingClientRect();
return (posX - bcr.left - window.pageXOffset) * power;
}
function fixPosY(posY){
const bcr = canvas.getBoundingClientRect();
return (posY - bcr.top - window.pageYOffset) * power;
}
function pain(){
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}

BIN
pain/the pain.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB