LINE ART
ラインアートを背景にする
html5にてCanvasがサポートされました。CanvasとJavaScriptで アニメーションを実現できます。アニーメーションをWEBの背景に出来ます。 あちこちのサイトを参照しサンプルを作ってみました。
[sample.html]
<html>
<head>
<title>
Line Art
</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="lineArt.css">
<script type="text/javascript" src="lineArt.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<section id="body">
ここにコンテンツを書く
．
．
．
．
</section>
</body>
</html>
参照サイト
背景をCanvasにする
https://qiita.com/mohayonao/items/e96e68aedc04a37f0c6d
[lineArt.css]
#canvas {
display: block;
position:fixed; top:0; left:0; width:100%; height: 100%;
}
#body { position:absolute; top:20; left:20; color: #FFF;}
ラインアート
[lineArt.js]
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
var W2 = W * 0.5; // LINEを描画する範囲（最下）
var H2 = H * 0.4; // （右端)
canvas.width = W;
canvas.height = H;
var particles = [];
for(var i = 0; i < 4; i++){ // 頂点の数
particles.push(new particle());
}
function particle(){
//location on the canvas
this.location = {
x: Math.random()*W2, y: Math.random()*H2
};
this.radius = 0;
this.speed = 2;
this.count = 0;
this.random = 0;
this.angle = Math.random()*360;
this.rgba = randomColor();
}
function randomColor(){
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);
var a = Math.random();
return "rgba("+r+", "+g+", "+b+", "+a+")";
}
function draw(){
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(20, 20, 20, 0.2)";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++){
var p = particles[i];
p.count = (p.count + 1) % (Math.round(Math.random()*5) + 8);
if(p.count == 0){
p.random = Math.random()*8 - 4;
p.rgba =randomColor();
}
ctx.fillStyle = "black";
ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
for(var n = i+1; n < particles.length; n++){
var p2 = particles[n];
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(p.location.x, p.location.y);
ctx.lineTo(p2.location.x, p2.location.y);
ctx.strokeStyle = p.rgba;
ctx.stroke();
}
p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180) + p.random;
p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180) + p.random;
if(p.location.x < 0) {
p.location.x = 0;
if(p.angle<180){
p.angle = 180 - p.angle;
} else {
p.angle = 360 - (p.angle - 180);
}
}
if(p.location.x > W2) {
p.location.x = W2;
if(p.angle<180){
p.angle = 180 - p.angle;
} else {
p.angle = 180 + (360 - p.angle);
}
}
if(p.location.y < 0) {
p.location.y = 0;
if(p.angle<180){
p.angle = 180 - p.angle;
} else {
p.angle = 180 + (180 - p.angle);
}
}
if(p.location.y > H2) {
p.location.y = H2;
if(p.angle>270){
p.angle = 360 - p.angle;
} else {
p.angle = 180 - (p.angle - 180);
}
}
}
}
setInterval(draw, 50);
};
正七角形を描画するメモ
- 多角形を書くために頂点の位置を計算する。
- 半径１の円を考えると、座標 ( Cos(radian) , Sin(radian) ) が頂点になる(【Unity】Texture2Dに多角形を描くより)
- ラジアン
- 180°= π[rad]
- 正n角形の各頂点は、単位円の中心をn等分しているので、等分した1コ当りの中心角は
- 中心角 = 2π÷n
- 図形の回転
- radian分回転する 1°= π ÷ 180
- x1 = x * cos(radian) - y * sin(radian);
- y1 = x * sin(radian) + y * cos(radian);
- radian分回転する 1°= π ÷ 180
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
var W2 = W * 0.5; // LINEを描画する範囲（最下）
var H2 = H * 0.4; // （右端)
canvas.width = W;
canvas.height = H;
var cx = W2/2;
var cy = H2/2;
var r = W2/5;
var pi = 3.141592;
var particles = [];
let n = 7;
for(var i = 0; i < n; i++){ // 頂点の数
particles.push(new particle(i,n));
}
function particle(i,n){
//頂点の座標 (頂点を天辺から始めたい場合は90°= (π / 2)引く
// x = cos(i * 2 * π / n - (π / 2))
// y = sin(i * 2 * π / n - (π / 2))
this.location = {
x: r*Math.cos(i*2*pi/n),
y: r*Math.sin(i*2*pi/n)
};
this.count = 0;
this.random = 0;
this.angle = Math.random()*360;
this.rgba = randomColor();
}
function randomColor(){
let r = Math.round(Math.random()*255);
let g = Math.round(Math.random()*255);
let b = Math.round(Math.random()*255);
let a = Math.random();
return "rgba("+r+", "+g+", "+b+", "+a+")";
}
function draw(){
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(20, 20, 20, 0.2)";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++){
var p = particles[i];
p.count = (p.count + 1) % (Math.round(Math.random()*5) + 8);
if(p.count == 0){
p.random = Math.random()*8 - 4;
p.rgba =randomColor();
}
ctx.fillStyle = "black";
ctx.fillRect(p.location.x, p.location.y, 0, 0);
for(var n = i+1; n < particles.length; n++){
var p2 = particles[n];
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(p.location.x + cx, p.location.y + cy);
ctx.lineTo(p2.location.x + cx, p2.location.y + cy);
ctx.strokeStyle = p.rgba;
ctx.stroke();
}
// 1°分時計回りに回転する
let rd = 1 * pi / 180.0;
let x1 = p.location.x * Math.cos(rd) - p.location.y * Math.sin(rd);
let y1 = p.location.x * Math.sin(rd) + p.location.y * Math.cos(rd);
p.location.x = x1;
p.location.y = y1;
}
}
setInterval(draw, 50);
};
perl de canvas
- 無精・短気・傲慢