diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..b441df8 --- /dev/null +++ b/.vscode/launch.json @@ -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}" + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html index f178a08..c62ab5a 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,13 @@ + Qrhlhplhp's Works

Qrhlhplhp's Works

APPLE PER MAN CALCULATOR

Link

BACH=DEMO MACHINE

Link +

PAIN TOOL

Link \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..daec0b2 --- /dev/null +++ b/main.css @@ -0,0 +1,7 @@ +h1{ + color:white; + background-color:black; +} +h2{ + color:red; +} \ No newline at end of file diff --git a/pain/index.html b/pain/index.html new file mode 100644 index 0000000..80792ef --- /dev/null +++ b/pain/index.html @@ -0,0 +1,18 @@ + + + + + + + Pain + + +

This is a PAIN TOOL

+ + + +
+ + + + \ No newline at end of file diff --git a/pain/main.js b/pain/main.js new file mode 100644 index 0000000..b602f6d --- /dev/null +++ b/pain/main.js @@ -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); +} \ No newline at end of file diff --git a/pain/the pain.jpg b/pain/the pain.jpg new file mode 100644 index 0000000..1046e56 Binary files /dev/null and b/pain/the pain.jpg differ