view source
JavaScript
document.title = '全画面虹レインボー';
var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:none;user-select:none;}';
document.getElementsByTagName('head').item(0).appendChild(style);
var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);
let styleImg = document.createElement('style');
styleImg.innerText = '#demo img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:100vh;opacity:1;cursor:none;}';
document.getElementsByTagName('head').item(0).appendChild(styleImg);
let img = document.createElement('img');
demo.appendChild(img);
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
let search = location.search.slice(1);
let params = new URLSearchParams(search);
let q = params.get('q');
if(q){
img.src = q;
}
var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var y=0;
var i1 = 0;
var i2 = i1+1;
var i3 = i1+1;
var i4 = i1+1;
var i5 = i1+1;
var i6 = i1+1;
i2 = i1+1;
i3 = i1+2;
i4 = i1+3;
i5 = i1+4;
var rgbAry = [
[0,0,255],
[0,255,255],
[0,255,0],
[255,255,0],
[255,0,0],
[255,0,255],
[0,0,255],
[0,255,255],
[0,255,0],
[255,255,0],
[255,0,0],
[255,0,255],
];
function iToRGB(i) {
return 'rgb('+ rgbAry[i].join(',') +')';
}
function draw() {
y-=h/30;
/*
i1++;
i2 = i1+1;
i3 = i1+2;
i4 = i1+3;
i5 = i1+4;
*/
if(i1>rgbAry.length-5){
i1=0;
}
if(y<-h){
y=0;
}
var grad = ctx.createLinearGradient(0, y, 0, y+h*2);
grad.addColorStop(0, iToRGB(i1));
grad.addColorStop(0.1, iToRGB(i2));
grad.addColorStop(0.2, iToRGB(i3));
grad.addColorStop(0.3, iToRGB(i4));
grad.addColorStop(0.4, iToRGB(i5));
grad.addColorStop(0.5, iToRGB(i1));
grad.addColorStop(0.6, iToRGB(i2));
grad.addColorStop(0.7, iToRGB(i3));
grad.addColorStop(0.8, iToRGB(i4));
grad.addColorStop(0.9, iToRGB(i5));
grad.addColorStop(1, iToRGB(i1));
ctx.fillStyle = grad;
ctx.fillRect(0,0,w,h);
ctx.closePath();
}
draw();
setInterval(function(){
draw();
}, 60/120);
// ファイルアップロード
var dragArea = document.getElementById('demo');
dragArea.classList.add('ready');
dragArea.addEventListener('dragstart', function(event){
event.dataTranfer.addElement(container);
});
dragArea.addEventListener('dragover', function(event){
event.preventDefault();
this.classList.add('drag');
});
dragArea.addEventListener('dragleave', function(event){
event.preventDefault();
this.classList.remove('drag');
});
dragArea.addEventListener('drop', function(event){
event.preventDefault();
this.classList.remove('drag');
console.log(event.dataTransfer.files);
if(!event.dataTransfer.files.length){
return;
}
var file = event.dataTransfer.files[0];
fileName = file.name.substring(0,12).split('.')[0] || 'name';
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file)
reader.addEventListener('load', function(){
var dataURL = reader.result;
console.log(dataURL);
var newImage = new Image();
img.src = dataURL;
newImage.src = dataURL;
newImage.onload = function(){
}
});
});
let opacity = 1;
img.addEventListener('click', function(ev) {
opacity -= 0.2;
if(opacity < 0.4){
opacity = 1;
}
img.style.opacity = opacity;
}, false );
document.oncontextmenu = function () {return false;}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.table({w:canvas.width, h:canvas.height});
w = document.body.clientWidth;
h = document.body.clientHeight;
cx = w/2;
cy = h/2;
}
window.onresize = resize;
window.addEventListener('click', function(ev) {
//resize();
//document.body.requestFullscreen();
//draw();
}, false );
window.addEventListener('dblclick', function(ev) {
//draw();
}, false );
document.addEventListener('fullscreenchange',function(e){
resize();
});
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-canvas-rainbow/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。