前端开发者前端开发初学者应该怎样入门 前端开发哪有来源项目 前端开发入门书单
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id=”cvs”></canvas>
<script type=”text/javascript”>
var cvs = document.getElementById(‘cvs’);
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
var ctx = cvs.getContext(‘2d’);
drawHeart(wordsPlay);
function drawHeart(callback) {
ctx.fillStyle = ‘rgba(255,255,255,0)’;
ctx.fillRect(0, 0, cvs.width, cvs.height);
var flowerHeart = {
heart: {
r: 50,//半径
radian: Math.PI,//弧度
i: 0,//动画记次
radianDecrement: Math.PI / 200 * 2,//心形线上的点的距离
time: 20,//每个点之间的时间间隔
timmer: null,//定时器名称,
num: 200,//分割为200个点
startRadian: Math.PI
},
flowerGarden: function (x, y, r) {
var radians = (Math.PI / 180) * Math.round(360 / 5);
for (var j = 0; j < 5; j++) {
var _x = x + r * Math.sin(radians * j),
_y = y + r * Math.cos(radians * j);
ctx.shadowColor = ‘#DC143C’;
ctx.shadowBlur = 8;
ctx.lineCap = ’round’;
ctx.fillStyle = ‘rgb(‘ + parseInt(Math.random() * 155 + 100) + ‘,’ + parseInt(Math.random() * 255) + ‘,’ + parseInt(Math.random() * 155 + 100) + ‘)’;
ctx.strokeStyle = ‘transparent’;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.bezierCurveTo(_x – Math.random() * r, _y, _x + Math.random() * r, _y, x, y);
ctx.stroke();
ctx.fill();
ctx.closePath();
}
},
getX: function (t, r) {
return cvs.width * 7 / 10 + r / 2 * (16 * Math.pow(Math.sin(t), 3));
},
getY: function (t, r) {
return cvs.height / 2 – 50 – r / 2 * (13 * Math.cos(t) – 5 * Math.cos(2 * t) – 2 * Math.cos(3 * t) – Math.cos(4 * t));
}
};
flowerHeart.heart.timmer = setInterval(function () {
flowerHeart.flowerGarden(flowerHeart.getX(flowerHeart.heart.radian, flowerHeart.heart.r), flowerHeart.getY(flowerHeart.heart.radian, flowerHeart.heart.r), 20);
flowerHeart.heart.radian += flowerHeart.heart.radianDecrement;
flowerHeart.heart.i++;
if (flowerHeart.heart.i >= flowerHeart.heart.num) {
clearInterval(flowerHeart.heart.timmer);
callback(drawBiaoda);
}
}, flowerHeart.heart.time);
};
function wordsPlay(callback) {
var str = ‘The furthest distance in the world.Is not between life and death.But when i stand in front of you.Yet you do not know that.I love you.The furthest distance in the world.Is not when i stand in front of you.Yet you can not see my love.But when undoubtedly knowing the love from both.Yet cannot be togehter.’;
var cursorOpacity = 1, start = 0, index = 1, count = 0, wordsArr = [];
var wordsTimer = setInterval(function () {
ctx.clearRect(200, 200, 600, 600);
var length = 0;
ctx.shadowBlur = 0;
ctx.fillStyle = ‘rgba(0,0,0,0)’;
ctx.fillRect(200, 200, 600, 600);
ctx.fill();
if (cursorOpacity == 1) {
cursorOpacity = 0;
} else {
cursorOpacity = 1;
}
ctx.font = “20px microsoft yahei”;
var gradient = ctx.createLinearGradient(0, 0, cvs.width, cvs.height);
gradient.addColorStop(“0”, “#1E90FF”);
//gradient.addColorStop(“0.5″,”black”);
//gradient.addColorStop(“1.0″,”#C71585”);
// 用渐变填色
ctx.fillStyle = gradient;
ctx.strokeStyle = gradient;
//ctx.fillStyle = ‘black’;
for (var i = 0; i < wordsArr.length; i++) {
ctx.strokeText(wordsArr[i], 250, 230 + i * 40);
length += wordsArr[i].length;
}
var print = str.substr(start, index);
ctx.strokeText(print, 250, 230 + wordsArr.length * 40);
if (print.indexOf(‘.’) > 0) {
wordsArr.push(print);
start += index;
index = 1;
}
count++;
if (count % 2 == 0) {
index++;
}
if (length == str.length) {
cursorOpacity = 0;
clearInterval(wordsTimer);
callback();
}
ctx.fillStyle = ‘rgba(0,0,0,’ + cursorOpacity + ‘)’;
ctx.fillText(‘|’, ctx.measureText(print).width + 256, 230 + wordsArr.length * 40);
}, 10);
};
function drawBiaoda() {
var opacity = 0;
var timer = setInterval(function () {
ctx.shadowBlur = 0;
ctx.fillStyle = ‘white’;
ctx.fillRect(cvs.width * 7 / 10 – 200, cvs.height / 2 – 140, 400, 250);
ctx.font = “16px microsoft yahei”;
ctx.strokeStyle = ‘rgba(220,20,60,’ + opacity + ‘)’;
ctx.strokeText(‘-Baby Xu: ‘, cvs.width * 7 / 10 – 200 + 20, cvs.height / 2 – 140 + 20);
ctx.strokeText(‘That I can not go on any longer without you.’, cvs.width * 7 / 10 – 200 + 20, cvs.height / 2 – 140 + 50);
ctx.strokeText(‘I made up my mindthat you were the’, cvs.width * 7 / 10 – 200 + 20, cvs.height / 2 – 140 + 80);
ctx.strokeText(‘only woman for me… the first day.’, cvs.width * 7 / 10 – 200 + 20, cvs.height / 2 – 140 + 110);
ctx.strokeText(‘I saw youat Twelve Oaks.’, cvs.width * 7 / 10 – 200 + 20, cvs.height / 2 – 140 + 140);
ctx.strokeText(‘-Mr.Yao’, cvs.width * 7 / 10 – 200 + 300, cvs.height / 2 – 140 + 170);
ctx.strokeText(‘2016/12/12’, cvs.width * 7 / 10 – 200 + 280, cvs.height / 2 – 140 + 200);
opacity += 0.01;
if (opacity >= 1) { clearInterval(timer); }
}, 20);
};
</script>
</body>
</html>
前端开发的项目描述 前端开发项目报告 前端开发 项目案例
» 本文来自：前端开发者 » 《canvas_flowerheart》
» 本文链接地址：https://www.rokub.com/5736.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册