canvas実現アニメ
116482 ワード
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
body {
overflow: hidden;
background: #000;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var oAnim=document.getElementById('canvas');
var context = oAnim.getContext("2d");
var radius=0
function drawCircle(){
context.beginPath();
render(radius);
context.arc(50,50,radius,0,Math.PI * 2);
context.closePath();
context.lineWidth=2;
context.strokeStyle='rgba(250,250,50,1)';
context.stroke();
radius +=0.5;// 0.5
if(radius > 20){
radius=0;
}
}
function render(x) {
// source-over, ， z-index:999
var prev = context.globalCompositeOperation;
//
// canvas
context.globalCompositeOperation = 'destination-in';
//
// canvas ，
context.globalAlpha = 0.95;
//
// canvas
context.fillRect(0,0,40*x,40*x);
//
//
context.globalCompositeOperation = prev
//;
// drawcricle ，
};
// canvas
setInterval(function(){
drawCircle();
},20);
</script>
</html>
canvas雨滴効果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rain</title>
</head>
<body>
<canvas id="canvas" style="position: absolute; height: 100%; width:100%;"></canvas>
<script>
window.onload=main;
function getRgb(r,g,b){
return "rgb("+ r+","+g+","+b+")";
}
function main(){
//drop
var dropList=[];
// ，
var gravity=0.8;
//
var linelist=[];
var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d');
//
var mousePos = [0, 0];
var backgroundColor = '#000';
canvasEl.width=canvasEl.clientWidth;
canvasEl.height=canvasEl.clientHeight;
var speedx=0;
var maxspeedx=0;
//
window.onresize=function () {
canvasEl.width=canvasEl.clientWidth;
canvasEl.height=canvasEl.clientHeight;
}
// ，
window.onmousemove=function (e) {
mousePos[0]=e.clientX;
mousePos[1]=e.clientY;
// -1 1
maxspeedx=(e.clientX-canvasEl.clientWidth/2)/(canvasEl.clientWidth/2);
}
//
function createLine(e){
// 12.5-37.5
var temp= 0.25*( 50+Math.random()*100);
// 16.5-50.5
var myline={
speed:5.5*(Math.random()*6+3),
die:false,
posx:e,
posy:-200,
h:temp,
//
color:(getRgb(Math.floor(temp*255/75),Math.floor(temp*255/75),Math.floor(temp*255/75)))
};
//
linelist.push(myline);
}
update();
//
function createDrop(x,y){
var mydrop={
die:false,
// x
posx:x,
// y
posy:y,
// x
vx:(Math.random()-0.5)*8,
// y
vy:Math.random()*(-6)-3,
radius:Math.random()*1.5+1
};
return mydrop;
}
//
function madedrops(x,y){
// 5-10
var maxi=Math.floor(Math.random()*5+5);
for(var i=0;i<maxi;i++){
dropList.push(createDrop(x,y));
}
}
function update() {
// ， ，
if(dropList.length>0){
dropList.forEach(function (e) {
// x = +
e.vx=e.vx+(speedx)/2;
//
e.posx=e.posx+e.vx;
// y = +
e.vy=e.vy+gravity;
e.posy=e.posy+e.vy;
// ，
if(e.posy>canvasEl.clientHeight){
e.die=true;
}
});
}
//
for(var i=dropList.length-1;i>=0;i--){
if(dropList[i].die){
dropList.splice(i,1);
}
}
//
// maxspeedx 0， ，
speedx=speedx+(maxspeedx-speedx)/50;
if(Math.random()>0){
// X -0.5 1.5 , ，
createLine(Math.random()*1.5*canvasEl.width -Math.random()*0.5*canvasEl.width);
createLine(Math.random()*1.5*canvasEl.width -Math.random()*0.5*canvasEl.width);
createLine(Math.random()*1.5*canvasEl.width -Math.random()*0.5*canvasEl.width);
}
// ， （1 0.8 ）
var mydeadline=canvasEl.clientHeight- Math.random()*canvasEl.clientHeight/5;
// ， 35 ，
linelist.forEach(function (e) {
// 35 ，
var dis=Math.sqrt( ((e.posx+speedx*e.h)-mousePos[0])*((e.posx+speedx*e.h)-mousePos[0])+(e.posy+e.h-mousePos[1])*(e.posy+e.h-mousePos[1]));
if(dis<35){
// ，
madedrops(e.posx+speedx*e.h,e.posy+e.h);
e.die=true;
}
// ， ，0.8 1
//
if((e.posy+e.h)>mydeadline){
// 。 0.9
if(Math.random() > 0.9){
madedrops(e.posx+speedx*e.h,e.posy+e.h);
e.die=true;
}
}
// ，
if(e.posy>=canvasEl.clientHeight){
e.die=true;
}else{
e.posy=e.posy+e.speed;
e.posx=e.posx+(e.speed*speedx);
}
});
//
for(var i=linelist.length-1;i>=0;i--){
if(linelist[i].die){
linelist.splice(i,1);
}
}
//
render();
//
window.requestAnimationFrame(update);
}
function render() {
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
linelist.forEach(
//
function (line) {
ctx.strokeStyle =line.color;
ctx.lineWidth=4.5;
ctx.beginPath();
ctx.moveTo(line.posx,line.posy);
ctx.lineTo(line.posx+speedx*line.h,line.posy+line.h);
ctx.stroke();
});
ctx.lineWidth=1;
ctx.strokeStyle = "#fff";
//
dropList.forEach(function (e) {
ctx.beginPath();
ctx.arc(e.posx,e.posy,e.radius,Math.random()*Math.PI*2,1*Math.PI);
ctx.stroke();
});
}
}
</script>
</body>
</html>
ボール衝突
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
#canvas1{
border: 4px dashed black;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas1" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//
function randomNum (m,n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
//
function Ball () {
//
this.r = randomNum(15,30);
//
this.color = 'rgb(' + randomNum(0,255) + ',' + randomNum(0,255) + ',' + randomNum(0,255) + ')';
//
this.x = randomNum(this.r,canvas.width-this.r);
this.y = randomNum(this.r,canvas.height-this.r);
// X 1 -1;
this.speedX = randomNum(2,5) * randomNum(0,1) ? 1 : -1;
this.speedY = randomNum(2,5) * randomNum(0,1) ? 1 : -1;
}
//
Ball.prototype.move = function () {
this.x += this.speedX;
this.y += this.speedY;
//
//
if (this.x <= this.r) {
this.x = this.r;
//
this.speedX *= -1;
}
//
if (this.x >= canvas.width-this.r) {
this.x = canvas.width-this.r;
this.speedX *= -1;
}
if (this.y <= this.r) {
this.y = this.r;
this.speedY *= -1;
}
if (this.y >= canvas.height-this.r) {
this.y = canvas.height-this.r;
this.speedY *= -1;
}
}
//
Ball.prototype.drawBall = function () {
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
ctx.fillStyle = this.color;
ctx.fill();
}
//
var balls = [];
for (var i = 0;i < 10;i++) {
var ball = new Ball();
balls.push(ball);
}
//
setInterval(function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
for (var i = 0;i < balls.length;i++) {
balls[i].move();
balls[i].drawBall();
//
for (j = 0;j < balls.length;j++) {
//
if (balls[i] == balls[j]) {
continue;//
}
//
if (ballCrash(balls[i],balls[j])) {
/*
1. ， ，
2. 1 ， r ， r
3. ，m1*v1+m2*v2=m1*v1'+m2*v2'
4. ， ，
*/
var fzx=(balls[i].r - balls[j].r)*balls[i].speedX + 2*balls[j].r*balls[j].speedX;
var fzx2=2*balls[i].r*balls[i].speedX+(balls[i].r - balls[j].r)*balls[j].speedX;
var fzy=(balls[i].r - balls[j].r)*balls[i].speedY + 2*balls[j].r*balls[j].speedY;
var fzy2=2*balls[i].r*balls[i].speedY+(balls[i].r - balls[j].r)*balls[j].speedY;
var fm=balls[i].r + balls[j].r;
balls[i].speedX=(fzx/fm);
balls[i].speedY=(fzy/fm);
balls[j].speedX=(fzx2/fm);
balls[j].speedY=(fzy2/fm);
}
}
}
},1)
//
function ballCrash (ball1,ball2) {
//
var distance = Math.sqrt(Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2));
//
if (distance == ball1.r + ball2.r) {
return true;//
}else if( distance < ball1.r + ball2.r){
if(Math.pow(ball1.speedX,2)+Math.pow(ball1.speedY,2)>Math.pow(ball2.speedX,2)+Math.pow(ball2.speedY,2)){
if(ball1.speedX>0){
ball2.x=ball2.x+ball1.r + ball2.r - distance;
if(ball1.speedY > 0){
ball2.y=ball2.y+ball1.r + ball2.r - distance;
}else{
ball2.y=ball2.y-ball1.r - ball2.r + distance;
}
}else{
ball2.x=ball2.x-ball1.r - ball2.r + distance;
if(ball1.speedY > 0){
ball2.y=ball2.y+ball1.r + ball2.r - distance;
}else{
ball2.y=ball2.y-ball1.r - ball2.r + distance;
}
}
}else{
if(ball2.speedX>0){
ball1.x=ball1.x+ball1.r + ball2.r - distance;
if(ball2.speedY > 0){
ball1.y=ball1.y+ball1.r + ball2.r - distance;
}else{
ball1.y=ball1.y-ball1.r - ball2.r + distance;
}
}else{
ball1.x=ball1.x-ball1.r - ball2.r + distance;
if(ball2.speedY > 0){
ball1.y=ball1.y+ball1.r + ball2.r - distance;
}else{
ball1.y=ball1.y-ball1.r - ball2.r + distance;
}
}
}
return true;
}
else{
return false;//
}
}
</script>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
#c{
margin: 0 auto;
display: block;
}
#r{
display: block;
margin: 0 auto;
}
#r::before{
color: black;
content: attr(min);
padding-right: 10px;
}
#r::after{
color: black;
content: attr(max);
padding-left: 10px;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<input type="range" id="r" min="0" max="100" step="1">
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var range = document.getElementById('r');
//range
var rangeValue = range.value;
var nowRange = 0; // range
//
var mW = canvas.width = 250;
var mH = canvas.height = 250;
var lineWidth = 2;
//
var r = mH / 2; //
var cR = r - 16 * lineWidth; //
//Sin
var sX = 0;
var sY = mH / 2;
var axisLength = mW; //
var waveWidth = 0.015 ; // （ ）,
var waveHeight = 6; // （ ）,
var speed = 0.09; // ，
var xOffset = 0; // x
ctx.lineWidth = lineWidth;
//
var IsdrawCircled = false;
var drawCircle = function(){
ctx.beginPath();
ctx.strokeStyle = '#1080d0';
//
ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
//
ctx.arc(r, r, cR, 0, 2 * Math.PI);
// ，
ctx.clip();
}
// sin
var drawSin = function(xOffset){
ctx.save();
var points=[]; // Sin ,
ctx.beginPath();
//
for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
// (x,y) ， “ *sin(x* + )”
//y=sin(TX+x)
var y = -Math.sin((sX + x) * waveWidth + xOffset);
//dY ，－
var dY = mH * (1 - nowRange / 100 );
points.push([x, dY + y * waveHeight]);
//
ctx.lineTo(x, dY + y * waveHeight);
}
//
//
//
ctx.lineTo(axisLength, mH);
//
ctx.lineTo(sX, mH);
//
// ， ctx.clip()，
ctx.lineTo(points[0][0],points[0][1]);
ctx.fillStyle = '#1c86d1';
ctx.fill();
ctx.restore();
};
//
var drawText = function(){
ctx.save();
var size = 0.4*cR;
ctx.font = size + 'px Microsoft Yahei';
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
ctx.fillText(nowRange + '%', r, r + size / 2);
ctx.restore();
};
var render = function(){
ctx.clearRect(0, 0, mW, mH);
// range
rangeValue = range.value;
if(IsdrawCircled == false){
drawCircle();
}
// input， 1
if(nowRange <= rangeValue){
var tmp = 1;
nowRange += tmp;
}
if(nowRange > rangeValue){
var tmp = 1;
nowRange -= tmp;
}
// ，
drawSin(xOffset);
drawText();
//
xOffset += speed;
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>