令人震撼的表白,你hold住吗？

2011-11-15 09:02 【当耐特】阅读(17297) 评论(44) 编辑收藏举报

一.简介

为什么程序员单身的多呢？因为面向对象的编程中，经常会遇到一个错误：找不到对象。

本文也属于单身程序员的福音范畴，让单身程序员勇敢示爱·····，但是老天保佑你的示爱对象不要用IE678~~

本文动画效果全部基于Jscex，然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解，本篇先饱饱眼福。

二.作品一：心碎

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script src="https://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script> <canvas id="myCanvas" width="1300" height="640" style="border: 15px solid gray; -moz-border-radius-bottomleft: 40px; -moz-border-radius-bottomright: 40px; -webkit-border-bottom-left-radius: 40px; -webkit-border-bottom-right-radius: 40px; -webkit-border-top-left-radius: 40px; -webkit-border-top-right-radius: 40px;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var cxt = canvas.getContext("2d"); cxt.fillStyle = "#030303"; cxt.fillRect(0, 0, canvas.width, canvas.height); var img = new Image(); img.src = "http://images.cnblogs.com/cnblogs_com/iamzhanglei/p1.png"; img.onload = function () { cxt.drawImage(img, 600, 600); } var cyc = 10; var a = 20; var balls = []; var ball = { x: 640, y: 520, r: 28, vx: 0, vy: -1250 }; balls.push(ball); var fireAsync = eval(Jscex.compile("async", function () { while (ball.y > 220) { cxt.fillStyle = "rgba(0, 0, 0, .3)"; cxt.fillRect(0, 0, canvas.width, canvas.height); cxt.fillStyle = "#fff"; cxt.drawImage(img, 600, 540); cxt.globalAlpha = 1; for (i in balls) { cxt.beginPath(); cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); balls[i].y += balls[i].vy * cyc / 1000; balls[i].x += balls[i].vx * cyc / 1000; if (balls[i].r + balls[i].y >= canvas.height) { if (balls[i].vy > 0) { balls[i].vy *= -0.7; } } else { balls[i].vy += a; } } $await(Jscex.Async.sleep(cyc)); } })) function getRandomNumber(min, max) { return (min + Math.floor(Math.random() * (max - min + 1))) } Vector2 = function (x, y) { this.x = x || 0; this.y = y || 0; }; var ball2s = []; for (var i = 0; i < 400; i++) { var ball2 = { position: new Vector2(630, 220), r: getRandomNumber(1, 4), vx: getRandomNumber(-200, 200), vy: getRandomNumber(-200, 200) }; ball2s.push(ball2); } var t = 0; var moveAsync = eval(Jscex.compile("async", function () { while (true) { try { if (t > 1000) { // cxt.clearRect(0, 0, canvas.width, canvas.height); // cxt.fillStyle = "#030303"; // cxt.fillRect(0, 0, canvas.width, canvas.height); // cxt.drawImage(img, 600, 540); t = 0; break; } // cxt.globalAlpha = 1; t += cyc; cxt.fillStyle = "rgba(0, 0, 0, .3)"; cxt.fillRect(0, 0, canvas.width, canvas.height); cxt.fillStyle = "#fff"; cxt.drawImage(img, 600, 540); // cxt.globalAlpha = (1200 - t) / 1200; //if (t > 1000) ball2s.length = 0; for (i in ball2s) { cxt.beginPath(); cxt.arc(ball2s[i].position.x, ball2s[i].position.y, ball2s[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); //反射 if (ball2s[i].r + ball2s[i].position.x > canvas.width || ball2s[i].position.x < ball2s[i].r) ball2s[i].vx *= -1; if (ball2s[i].r + ball2s[i].position.y > canvas.height || ball2s[i].position.y < ball2s[i].r) ball2s[i].vy *= -1; ball2s[i].position.x += ball2s[i].vx * cyc / 1000; ball2s[i].position.y += ball2s[i].vy * cyc / 1000; } } catch (e) { alert(e); } $await(Jscex.Async.sleep(cyc)); } })) // moveAsync().start(); var heartR = 100; var fireAsync2 = eval(Jscex.compile("async", function () { while (true) { var count = 0; try { //alert(ball2s.length) cxt.fillStyle = "rgba(0, 0, 0, .3)"; cxt.fillRect(0, 0, canvas.width, canvas.height); cxt.fillStyle = "#fff"; cxt.drawImage(img, 600, 540); for (i in ball2s) { cxt.beginPath(); cxt.arc(ball2s[i].position.x, ball2s[i].position.y, ball2s[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); ball2s[i].position.y += ball2s[i].vy * cyc / 1000; ball2s[i].position.x += ball2s[i].vx * cyc / 1000; if (ball2s[i].r + ball2s[i].position.x > canvas.width) { //边界值处理，防止连续进入条件 ball2s[i].position.x = canvas.width - ball2s[i].r; ball2s[i].vx *= -0.9; } if (ball2s[i].position.x < ball2s[i].r) { //边界值处理，防止连续进入条件 ball2s[i].position.x = ball2s[i].r; ball2s[i].vx *= -0.9; } if (ball2s[i].r + ball2s[i].position.y > canvas.height) { //边界值处理，防止连续进入条件 ball2s[i].position.y = canvas.height - ball2s[i].r; ball2s[i].vy *= -0.5; } if (ball2s[i].position.y < ball2s[i].r) { //边界值处理，防止连续进入条件 ball2s[i].position.y = ball2s[i].r; ball2s[i].vy *= -0.5; } var x = ball2s[i].position.x - 630; var y = 220 - ball2s[i].position.y; var result = ((x / heartR) * (x / heartR) + (y / heartR) * (y / heartR) - 1) * ((x / heartR) * (x / heartR) + (y / heartR) * (y / heartR) - 1) * ((x / heartR) * (x / heartR) + (y / heartR) * (y / heartR) - 1) - (x / heartR) * (x / heartR) * (y / heartR) * (y / heartR) * (y / heartR); if (result > 0) { ball2s[i].vy += 140; } else { count++; } } } catch (e) { alert(e) } //alert(count) if (count < 20) break; $await(Jscex.Async.sleep(cyc)); } })) var qAsync = eval(Jscex.compile("async", function () { while (true) { $await(fireAsync()); $await(moveAsync()); $await(fireAsync2()); ball2s.length = 0; for (var i = 0; i < 400; i++) { var ball2 = { position: new Vector2(630, 220), r: getRandomNumber(1, 4), vx: getRandomNumber(-200, 200), vy: getRandomNumber(-200, 200) }; ball2s.push(ball2); } balls.length = 0; ball = { x: 640, y: 520, r: 28, vx: 0, vy: -1250 }; balls.push(ball); $await(Jscex.Async.sleep(1000)); } })) qAsync().start(); </script> </body> </html>

三.作品二：封心

四.作品三：I♥U

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script src="https://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script> <canvas id="myCanvas" width="1300" height="640" style="border: 15px solid gray; -moz-border-radius-bottomleft: 40px; -moz-border-radius-bottomright: 40px; -webkit-border-bottom-left-radius: 40px; -webkit-border-bottom-right-radius: 40px; -webkit-border-top-left-radius: 40px; -webkit-border-top-right-radius: 40px;"> Your browser does not support the canvas element. </canvas> <script src="https://files.cnblogs.com/iamzhanglei/CanvasText-0.4.1.js" type="text/javascript"></script> <script> // Definition of global vars var canvas = document.getElementById("myCanvas"); var cxt = canvas.getContext("2d"); // Creation of the new CanvasText instance. var CT = new CanvasText; function initCanvasText() { } var dTime = 0; var drawAsync = eval(Jscex.compile("async", function () { while (true) { dTime += 100; // Once window is loaded we set the configuration and the default styles. CT.config({ canvas: canvas, context: cxt, fontFamily: "Verdana", fontSize: "162px", fontColor: "#ff5e99", fontFamily: "Times new roman", fontWeight: "bold", fontStyle: "italic" }); // The text we want to draw. var textI = 'I'; // Draw it! CT.drawText({ text: textI, x: 330, y: 270, boxWidth: 1555 }); // The text we want to draw. var textU = 'U'; // Draw it! CT.drawText({ text: textU, x: 800, y: 290, boxWidth: 1555 }); if (dTime > 800) { dTime = 0; break; } $await(Jscex.Async.sleep(100)); } })) </script> <script type="text/javascript"> cxt.fillStyle = "#030303"; cxt.fillRect(0, 0, canvas.width, canvas.height); var img = new Image(); img.src = "http://images.cnblogs.com/cnblogs_com/iamzhanglei/p1.png"; img.onload = function () { cxt.drawImage(img, 600, 600); } var cyc = 10; var a = 20; var balls = []; var ball = { x: 640, y: 520, r: 28, vx: 0, vy: -1250 }; balls.push(ball); var fireAsync = eval(Jscex.compile("async", function () { while (ball.y > 220) { cxt.fillStyle = "rgba(0, 0, 0, .3)"; cxt.fillRect(0, 0, canvas.width, canvas.height); cxt.fillStyle = "#fff"; cxt.drawImage(img, 600, 540); cxt.globalAlpha = 1; for (i in balls) { cxt.beginPath(); cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); balls[i].y += balls[i].vy * cyc / 1000; balls[i].x += balls[i].vx * cyc / 1000; if (balls[i].r + balls[i].y >= canvas.height) { if (balls[i].vy > 0) { balls[i].vy *= -0.7; } } else { balls[i].vy += a; } } $await(Jscex.Async.sleep(cyc)); } })) function getRandomNumber(min, max) { return (min + Math.floor(Math.random() * (max - min + 1))) } function randomColor() { //16进制方式表示颜色0-F var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#"; var index; for (var i = 0; i < 6; i++) { //取得0-15之间的随机整数 index = Math.round(Math.random() * 15); strHex += arrHex[index]; } return strHex; } Vector2 = function (x, y) { this.x = x || 0; this.y = y || 0; }; var ball2s = []; for (var i = 0; i < 700; i++) { var ball2 = { position: new Vector2(630, 220), r: getRandomNumber(1, 4), vx: getRandomNumber(-200, 200), vy: getRandomNumber(-200, 200), color: randomColor() }; ball2s.push(ball2); } var t = 0; var moveAsync = eval(Jscex.compile("async", function () { while (true) { try { if (t > 1000) { // cxt.clearRect(0, 0, canvas.width, canvas.height); // cxt.fillStyle = "#030303"; // cxt.fillRect(0, 0, canvas.width, canvas.height); // cxt.drawImage(img, 600, 540); t = 0; break; } // cxt.globalAlpha = 1; t += cyc; cxt.fillStyle = "rgba(0, 0, 0, .3)"; cxt.fillRect(0, 0, canvas.width, canvas.height); cxt.drawImage(img, 600, 540); // cxt.globalAlpha = (1200 - t) / 1200; //if (t > 1000) ball2s.length = 0; for (i in ball2s) { cxt.fillStyle = ball2s[i].color; cxt.beginPath(); cxt.arc(ball2s[i].position.x, ball2s[i].position.y, ball2s[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); //反射 if (ball2s[i].r + ball2s[i].position.x > canvas.width || ball2s[i].position.x < ball2s[i].r) ball2s[i].vx *= -1; if (ball2s[i].r + ball2s[i].position.y > canvas.height || ball2s[i].position.y < ball2s[i].r) ball2s[i].vy *= -1; ball2s[i].position.x += ball2s[i].vx * cyc / 1000; ball2s[i].position.y += ball2s[i].vy * cyc / 1000; } } catch (e) { alert(e); } $await(Jscex.Async.sleep(cyc)); } })) // moveAsync().start(); var heartR = 110; var f2Time = 0; var fireAsync2 = eval(Jscex.compile("async", function () { while (true) { f2Time += cyc; try { //alert(ball2s.length) cxt.fillStyle = "rgba(0, 0, 0, .3)"; cxt.fillRect(0, 0, canvas.width, canvas.height); cxt.drawImage(img, 600, 540); for (i in ball2s) { cxt.fillStyle = ball2s[i].color; cxt.beginPath(); cxt.arc(ball2s[i].position.x, ball2s[i].position.y, ball2s[i].r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); ball2s[i].position.y += ball2s[i].vy * cyc / 1000; ball2s[i].position.x += ball2s[i].vx * cyc / 1000; if (ball2s[i].r + ball2s[i].position.x > canvas.width) { //边界值处理，防止连续进入条件 ball2s[i].position.x = canvas.width - ball2s[i].r; ball2s[i].vx *= -0.9; } if (ball2s[i].position.x < ball2s[i].r) { //边界值处理，防止连续进入条件 ball2s[i].position.x = ball2s[i].r; ball2s[i].vx *= -0.9; } if (ball2s[i].r + ball2s[i].position.y > canvas.height) { //边界值处理，防止连续进入条件 ball2s[i].position.y = canvas.height - ball2s[i].r; ball2s[i].vy *= -0.5; } if (ball2s[i].position.y < ball2s[i].r) { //边界值处理，防止连续进入条件 ball2s[i].position.y = ball2s[i].r; ball2s[i].vy *= -0.5; } var x = ball2s[i].position.x - 630; var y = 220 - ball2s[i].position.y; var result = ((x / heartR) * (x / heartR) + (y / heartR) * (y / heartR) - 1) * ((x / heartR) * (x / heartR) + (y / heartR) * (y / heartR) - 1) * ((x / heartR) * (x / heartR) + (y / heartR) * (y / heartR) - 1) - (x / heartR) * (x / heartR) * (y / heartR) * (y / heartR) * (y / heartR); if (result > 0) { ball2s[i].vy += 140; } else { ball2s[i].vy = 0; ball2s[i].vx = 0; } } } catch (e) { alert(e) } if (f2Time > 800) { f2Time = 0; break; } $await(Jscex.Async.sleep(cyc)); } })) var qAsync = eval(Jscex.compile("async", function () { while (true) { $await(fireAsync()); $await(moveAsync()); $await(fireAsync2()); $await(drawAsync()); ball2s.length = 0; for (var i = 0; i < 650; i++) { var ball2 = { position: new Vector2(630, 220), r: getRandomNumber(1, 4), vx: getRandomNumber(-200, 200), vy: getRandomNumber(-200, 200), color: randomColor() }; ball2s.push(ball2); } balls.length = 0; ball = { x: 640, y: 520, r: 28, vx: 0, vy: -1250 }; balls.push(ball); $await(Jscex.Async.sleep(1000)); } })) qAsync().start(); </script> </body> </html>

四.同步更新

本文已同步更新至：

HTML5实验室【目录】: http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html

刷新页面返回顶部

当耐特