add pain tool
This commit is contained in:
parent
d801040974
commit
656fef9996
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal 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}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -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
7
main.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
h1{
|
||||||
|
color:white;
|
||||||
|
background-color:black;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color:red;
|
||||||
|
}
|
18
pain/index.html
Normal file
18
pain/index.html
Normal 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
128
pain/main.js
Normal 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
BIN
pain/the pain.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 60 KiB |
Loading…
Reference in New Issue
Block a user