canvas初试动画——小黄鸭（也是我当初学习canvas的处女作）
效果图如下：
源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body{}
canvas{
background: rgba(0,0,0,0);
position: absolute;
left:0;
right:0;
margin: auto;
}
.c2{
background: rgba(0,0,0,0);
}
</style>
<script type="text/javascript">
window.onload = function(){
var c1 = document.getElementsByClassName('c1')[0];
var ctx = document.getElementsByClassName('c1')[0].getContext("2d");
ctx.lineWidth = 6;
ctx.strokeStyle = "#7e5f4a";
ctx.beginPath();
ctx.fillStyle = "#FFFF66";
ctx.moveTo(60, 222);
ctx.bezierCurveTo(-10, 400, 450, 430, 331, 179);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#FFFF66";
ctx.moveTo(205, 212);
ctx.bezierCurveTo(53, 55, 391, -39, 331, 189);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "rgba(255,255,255)";
ctx.moveTo(57, 222);
ctx.bezierCurveTo(144, 242, 99, 219, 190, 198);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#FFFF66";
ctx.moveTo(148, 304);
ctx.bezierCurveTo(374, 330, 231, 130, 139, 282);
ctx.fill();
ctx.stroke();
ctx.rotate(4/6*Math.PI);
ctx.beginPath();
ctx.fillStyle = "#7e5f4a";
BezierEllipse2(ctx, -20, -275, 12, 15);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#fff";
BezierEllipse2(ctx, -20, -270, 3 , 6);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "transparent";
ctx.fillStyle = "#f46a4d";
BezierEllipse2(ctx, -55, -360, 15 , 20);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#7e5f4a";
ctx.moveTo(-40, -365);
ctx.bezierCurveTo(-45, -390, -80, -390, -70, -346);
ctx.stroke();
//画椭圆
function BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // 水平控制点偏移量
oy = b * k; // 垂直控制点偏移量
ctx.beginPath();
//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
ctx.stroke();
};
var c2 = document.getElementsByClassName('c2')[0];
var ctx2 = document.getElementsByClassName('c2')[0].getContext("2d");
var a = 390;
var b = 210;
var deraction = -1;
var caiWidth = 2;
setInterval(function(){
ctx2.strokeStyle = "rgba(0,255,255,0.3)";
var linearGradient= ctx2.createLinearGradient(0,0,0,500);
linearGradient.addColorStop(0,"rgba(0,255,255,0.1)");
linearGradient.addColorStop(0.5,"rgba(154,255,255,0.1)");
linearGradient.addColorStop(1,"rgba(0,255,255,1)");
ctx2.fillStyle = linearGradient;
ctx2.lineWidth = 1;
ctx2.beginPath();
ctx2.clearRect(0,0,800,500);
var speed = rand(5,10);
var speed2 = rand(5,10);
ctx2.moveTo(0, 300);
if(deraction == 1){
a += speed;
c1.style.top = c1.offsetTop + speed/10 + "px";
b -= speed2;
}
if(deraction == -1){
a -= speed;
c1.style.top = c1.offsetTop - speed/9 + "px";
b += speed2;
}
ctx2.bezierCurveTo(200 , a , 600 , b , 800 , 300);
if(a >= 390){
deraction = -1;
}
if(a <= 210){
deraction = 1;
}
ctx2.lineTo(800,500);
ctx2.lineTo(0,500);
ctx2.fill();
ctx2.stroke();
ctx2.closePath();
ctx2.beginPath();
ctx2.moveTo(80, 430);
ctx2.fillStyle = "rgba(154,255,255,0.5)";
ctx2.bezierCurveTo(400 , a+speed/10+100 , 450 , b-speed2/10+100 , 770 , 420);
ctx2.fill();
ctx2.closePath();
for(var num=0;num<5;num++){
ctx2.beginPath();
ctx2.moveTo(80+num*6, 330+num*6);
ctx2.fillStyle = "rgba(179,255,255,"+ (1-0.1*num-0.5) +")";
ctx2.bezierCurveTo(300 , a+speed/10+40 , 350 , b-speed2/10 , 370+num*6 , 320+num*6);
ctx2.fill();
ctx2.closePath();
}
//彩虹
for(var cai=0;cai<3;cai++){
ctx2.beginPath();
if(ctx2.lineWidth == 4 && cai == 2){
ctx2.strokeStyle = "rgba(0,255,0,0.6)";
ctx2.moveTo(520, 40+(cai+3)*ctx2.lineWidth);
ctx2.bezierCurveTo(700-+(cai+1)*ctx2.lineWidth , -50+(cai+1)*ctx2.lineWidth, 780-+(cai+1)*ctx2.lineWidth , 60+(cai+1)*ctx2.lineWidth , 790-(cai+1)*ctx2.lineWidth , 150+(cai+1)*ctx2.lineWidth);
ctx2.stroke();
ctx2.closePath();
}
ctx2.beginPath();
if(caiWidth<= 4){
ctx2.lineWidth = caiWidth;
}else{
ctx2.lineWidth = 4;
}
if(cai == 0){
ctx2.strokeStyle = "rgba(255,0,0,0.6)";
}
if(cai == 1){
ctx2.strokeStyle = "rgba(255,255,0,0.6)";
}
if(cai == 2){
ctx2.strokeStyle = "rgba(0,0,255,0.4)";
}
ctx2.moveTo(520, 40+(cai+1.4)*ctx2.lineWidth);
ctx2.bezierCurveTo(700-+cai*ctx2.lineWidth , -50+cai*ctx2.lineWidth, 780-+cai*ctx2.lineWidth , 60+cai*ctx2.lineWidth , 790-cai*ctx2.lineWidth , 150+cai*ctx2.lineWidth);
ctx2.stroke();
ctx2.closePath();
}
caiWidth += 0.1;
//云朵
ctx2.beginPath();
ctx2.fillStyle = "#ff0";
ctx2.moveTo(540, 20);
ctx2.bezierCurveTo(580 , 0, 680 , 100 , 540 , 80);
ctx2.fill();
ctx2.closePath();
ctx2.beginPath();
ctx2.fillStyle = "#ff0";
ctx2.moveTo(540, 20);
ctx2.bezierCurveTo(380 , 20, 480 , 80 , 540 , 80);
ctx2.fill();
ctx2.closePath();
ctx2.beginPath();
ctx2.fillStyle = "#ff0";
ctx2.moveTo(740, 120);
ctx2.bezierCurveTo(580 , 100, 680 , 200 , 740 , 180);
ctx2.fill();
ctx2.closePath();
ctx2.beginPath();
ctx2.fillStyle = "#ff0";
ctx2.moveTo(740, 120);
ctx2.bezierCurveTo(780 , 100, 880 , 200 , 740 , 180);
ctx2.fill();
ctx2.closePath();
},100);
//随机n到m的一个整数
function rand(n,m){
var c = m - n + 1;
return Math.floor(Math.random() * c + n);
}
}
</script>
</head>
<body>
<canvas width="800" height="500" class="c1"></canvas>
<canvas width="800" height="500" class="c2"></canvas>
</body>
</html>
其他炫酷动画请移步至我的博客
