Last active
July 29, 2023 13:29
-
-
Save yustier/abb3d7805fd334e0eab64f33a274b677 to your computer and use it in GitHub Desktop.
指定した大きさの色相環の画像を作成する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script> | |
function draw(canvas, size) { | |
const ctx = canvas.getContext('2d'); | |
const conicGrad = ctx.createConicGradient(0, size / 2, size / 2); | |
conicGrad.addColorStop(0, '#f00'); | |
conicGrad.addColorStop(1 / 6, '#f0f'); | |
conicGrad.addColorStop(2 / 6, '#00f'); | |
conicGrad.addColorStop(3 / 6, '#0ff'); | |
conicGrad.addColorStop(4 / 6, '#0f0'); | |
conicGrad.addColorStop(5 / 6, '#ff0'); | |
conicGrad.addColorStop(1, '#f00'); | |
ctx.fillStyle = conicGrad; | |
ctx.fillRect(0, 0, size, size); | |
} | |
window.onload = () => { | |
const canvas = document.querySelector('#canvas'); | |
canvas.style = 'zoom:' + (100 / window.devicePixelRatio || 100) + '%;'; | |
const size = document.querySelector('#size'); | |
size.addEventListener('change', () => { | |
canvas.width = size.value; | |
canvas.height = size.value; | |
draw(canvas, size.value); | |
}); | |
const save = document.querySelector('#save'); | |
save.addEventListener('click', () => { | |
const link = document.createElement('a'); | |
link.href = canvas.toDataURL(); | |
link.download = ''; | |
link.click(); | |
}); | |
draw(canvas, size.value); | |
}; | |
</script> | |
</head> | |
<body> | |
Size (px): | |
<input id="size" type="text" value="640"> | |
<input id="save" type="button" value="Save"><br> | |
<canvas id="canvas" width="640" height="640"></canvas> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment