H5网页,主要使用canvas画布和JS实现页面效果。
页面展示:
附源码,稍微有点多,直接复制下来就可以玩了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白神器</title>
<!-- 样式 -->
<style type="text/css">
*{margin: 0; padding: 0;}
html,body {
height: 100%;
overflow: hidden;
}
canvas {
/* border: 1px solid red; */
}
#cWindmill {
position: fixed;
top: 0;
}
#cRing {
position: fixed;
top: 0;
right: 0;
}
#cMarshmallow1,#cMarshmallow2,#cMarshmallow3,#cMarshmallow4,#cMarshmallow5 {
position: fixed;
cursor: pointer;
}
#cWave,#cFish {
position: fixed;
bottom: 0px;
}
#cHeart {
position: fixed;
}
#choice {
/* border: 1px solid red; */
position: absolute;
text-align: center;
bottom: 200px;
z-index: 100;
display: none;
}
input {
width: 100px;
height: 30px;
cursor: pointer;
font-size: 20px;
border-radius: 15px;
box-shadow: 5px 5px 10px #B8B8BA;
text-align: center;
}
#heart {
margin-right: 150px;
color: white;
background: linear-gradient(to right, #FCEFF9 , #FF5681, #F47BA8);
}
#out {
margin-left: 150px;
background-color: #F6F6F6;
}
</style>
</head>
<body id="body">
<canvas id="cBg" ></canvas>
<canvas id="cWindmill" width="210px" height="210px"></canvas>
<canvas id="cRing" width="200px" height="200px"></canvas>
<canvas id="cMarshmallow1" width="210px" height="210px"></canvas>
<canvas id="cMarshmallow2" width="210px" height="210px"></canvas>
<canvas id="cMarshmallow3" width="210px" height="210px"></canvas>
<canvas id="cMarshmallow4" width="210px" height="210px"></canvas>
<canvas id="cMarshmallow5" width="210px" height="210px"></canvas>
<canvas id="cWave" ></canvas>
<canvas id="cFish" ></canvas>
<!-- <canvas id="cHeart"></canvas> -->
<!-- 按钮 -->
<p id="choice">
<input id="heart" type="button" value="心动" />
<input id="out" type="button" value="淘汰" />
</p>
</body>
<!-- 工具 -->
<script type="text/javascript">
/** 根据id查找元素 */
function _id(id) {
return document.getElementById(id);
}
/** 创建元素 */
function _creEle(tagName) {
return document.createElement(tagName);
}
/** 设置style样式 */
function _setStyle(ele, style, val) {
if (style == "top") {
ele.style.top = val;
} else if (style == "bottom") {
ele.style.bottom = val;
} else if (style == "left") {
ele.style.left = val;
} else if (style == "right") {
ele.style.right = val;
} else if (style == "width") {
ele.style.width = val;
} else if (style == "display") {
ele.style.display = val;
}
}
/** 画布设置宽高属性用 */
function _setAttr(ele, attr, val) {
if (attr == "width") {
ele.width = val;
} else if (attr == "height") {
ele.height = val;
} else if (attr == "id") {
ele.id = val;
}
}
/** 获取双标签的内容 */
function _getHtml(id) {
return _id(id).innerHTML;
}
/** 设置双标签的内容 */
function _setHtml(id, val) {
_id(id).innerHTML = val;
}
</script>
<!-- 逻辑代码 -->
<script type="text/javascript">
//准备表白的话,一句话不要太长
var words = ["i love you","晚点遇见你没有关系","但愿余生都是你","相思为你流浪","筑起爱的城墙","无论你身在何方","总有心儿向往",
"我这辈子最大的幸运就是认识你","而最大的不幸却是不能拥有你","也许你会遇到你深爱的人","可是却不会遇到第二个像我这么爱你的人",
"你的唇型很好看适合说爱我更适合吻我","我有个恋爱要和你谈一谈","你知道我最大的缺点是什么吗?缺了你","我从来不会秒回别人的信息,除了你",
"确认过眼神,我遇上对的人","我做了一个梦,梦里你蓄起了长发,我们一起慢慢变老","我结婚的时候你一定要来,不然没有新娘很尴尬",
"以后不要让我再见到你啦!不然我见你一次喜欢你一次","机场的安检为什么我总是过不了,因为他们发现我心里还有一个你","我有超能力,超喜欢你",
"我迷路了,因为我的脑子里全是你","我有点怕你,因为我怕老婆","我想换个头像,换个你这样的","我不要只喜欢你,我还要爱你宠你疼你",
"记住你的身份,你是我的人","我一看到你就饱了,因为秀色可餐啊","你的腿一定很累吧,你在我的脑海里跑了一整天","你生日是几号,我把银行卡密码忘了"];
// 女神点击心动时回应的话
var heartRep = "@xxx 我也喜欢你ლ(°◕‵ƹ′◕ლ)";
// 女神点击淘汰时回应的话
var heartOut = "抱歉,我滚了o(╥﹏╥)o";
////////////////////////////////////////////////////////////////////////////////
// 加载窗口
window.onload = function() {
bg();
init();
onClickListener();
rotateWindmill();
rotateRing();
moveWave();
moveFish();
setWord();
}
////////////////////////////////////////////////////////////////////////////////
// 初始化
function init() {
// 棉花糖上显示的文字
marshmallowOne("i love you");
marshmallowTwo("晚点遇见你没有关系");
marshmallowThere("但愿余生都是你");
marshmallowFour("相思为你流浪");
marshmallowFive("筑起爱的城墙");
// 设置内容
_setHtml("cMarshmallow1", "i love you");
_setHtml("cMarshmallow2", "晚点遇见你没有关系");
_setHtml("cMarshmallow3", "但愿余生都是你");
_setHtml("cMarshmallow4", "相思为你流浪");
_setHtml("cMarshmallow5", "筑起爱的城墙");
// 设置位置
_setStyle(_id("cMarshmallow1"), "top", 0);
_setStyle(_id("cMarshmallow1"), "left", (screen.width/5 + 25) + "px");
_setStyle(_id("cMarshmallow2"), "top", 50 +"px");
_setStyle(_id("cMarshmallow2"), "left", (screen.width/2 - 100) + "px");
_setStyle(_id("cMarshmallow3"), "top", 0);
_setStyle(_id("cMarshmallow3"), "right", (screen.width/5 + 25) + "px");
_setStyle(_id("cMarshmallow4"), "top", 250 + "px");
_setStyle(_id("cMarshmallow4"), "left", screen.width/8 + "px");
_setStyle(_id("cMarshmallow5"), "top", 250 + "px");
_setStyle(_id("cMarshmallow5"), "right", screen.width/8 + "px");
// 设置波浪画布宽高
_setAttr(_id("cWave"), "width", screen.width);
_setAttr(_id("cWave"), "height", 200);
// 设置小鲸鱼画布宽高
_setAttr(_id("cFish"), "width", screen.width);
_setAttr(_id("cFish"), "height", 200);
// 2个选择按钮段落所占宽度
_setStyle(_id("choice"), "width", screen.width + "px");
}
////////////////////////////////////////////////////////////////////////////////
// 是否其中一个被点了,执行选择结果期间只能点一个,不能连续点两个
var isClick = false;
// 点击事件监听器
function onClickListener() {
// 心跳id
var heartbeatId;
// 文字
var word;
// 左上棉花糖1
_id("cMarshmallow1").onclick = function() {
// 有其中一个被点了
if (isClick) return;
// 获取内容
word = _getHtml("cMarshmallow1");
heartbeatId = execute(word);
};
// 中间棉花糖2
_id("cMarshmallow2").onclick = function() {
if (isClick) return;
word = _getHtml("cMarshmallow2");
heartbeatId = execute(word);
};
// 右上棉花糖3
_id("cMarshmallow3").onclick = function() {
if (isClick) return;
word = _getHtml("cMarshmallow3");
heartbeatId = execute(word);
};
// 左下棉花糖4
_id("cMarshmallow4").onclick = function() {
if (isClick) return;
word = _getHtml("cMarshmallow4");
heartbeatId = execute(word);
};
// 右下棉花糖5
_id("cMarshmallow5").onclick = function() {
if (isClick) return;
word = _getHtml("cMarshmallow5");
heartbeatId = execute(word);
};
// 心动按钮
_id("heart").onclick = function() {
clickHeart(heartbeatId,word);
};
// 淘汰按钮
_id("out").onclick = function() {
clickOut(heartbeatId);
};
}
// 执行
function execute(word) {
// 没有内容
if (!word) return;
// 显示画布,和按钮
addCHeart();
_setStyle(_id("choice"), "display", "inline");
// 心跳
var heartbeatId = heartbeat(word);
// 被点
isClick = true;
return heartbeatId;
}
// 添加心形画布,为了解决点击心动按钮,心形缩小之后,绘画位置改变不好恢复到原位,所以用动态生成
function addCHeart() {
var canvas = _creEle("canvas");
// 设置位置
_setStyle(canvas, "top", 20 + "px");
_setStyle(canvas, "left", (screen.width/2 - 300) + "px");
// 设置宽高
_setAttr(canvas, "width", 600);
_setAttr(canvas, "height", screen.height);
// id属性
_setAttr(canvas, "id", "cHeart");
// 添加到body中
_id("body").append(canvas);
}
////////////////////////////////////////////////////////////////////////////////
// 背景设置
function bg() {
// 设置宽高width:screenWidth,height:screenHeight
// 获取画布
var canvas = _id("cBg");
var cs = canvas.getContext("2d");
// 设置画布宽高
_setAttr(_id("cBg"), "width", screen.width);
_setAttr(_id("cBg"), "height", screen.height);
// 渐变色,填充背景
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0,"#1AA9F5"); // 蓝色,由深到浅
grd.addColorStop(0.2,"#3FC1F3"); // 蓝
grd.addColorStop(0.4,"#C6E9FC"); // 蓝
grd.addColorStop(0.6,"white"); // 白
cs.fillStyle = grd;
cs.fillRect(0,0,screen.width,screen.height);
}
////////////////////////////////////////////////////////////////////////////////
// 旋转风车
function rotateWindmill() {
var canvas = _id("cWindmill");
var cs = canvas.getContext("2d");
// 阴影
cs.shadowBlur=10;
cs.shadowOffsetX=8;
cs.shadowOffsetY=8;
cs.shadowColor="#B8B8BA";
// 画布中点
var centerX = canvas.width/2 - 5;
var centerY = canvas.height/2 - 5;
// 旋转
setInterval(function() {
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 绘图原点移动到画布中点
cs.translate(centerX,centerY);
// 每次旋转1度
cs.rotate(Math.PI/180);
// 移动画布原点
cs.translate(-centerX,-centerY);
windmill(canvas,cs);
}, 15);
}
// 风车
function windmill(canvas,cs) {
// 画布width:200,height:200
// 渐变色
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0.2,"#E8BEFD");
grd.addColorStop(0.4,"#E1EAD9");
grd.addColorStop(0.6,"#7F65CA");
grd.addColorStop(0.8,"#88DFCF");
cs.fillStyle = grd;
// 开始画,左上部分
cs.beginPath();
cs.moveTo(100,100);
cs.lineTo(30,30);
cs.lineTo(30,70);
cs.fill();
// 左下部分
cs.beginPath();
cs.moveTo(100,100);
cs.lineTo(30,170);
cs.lineTo(70,170);
cs.fill();
// 右下部分
cs.beginPath();
cs.moveTo(100,100);
cs.lineTo(170,170);
cs.lineTo(170,130);
cs.fill();
// 右上部分
cs.beginPath();
cs.moveTo(100,100);
cs.lineTo(170,30);
cs.lineTo(130,30);
cs.fill();
}
////////////////////////////////////////////////////////////////////////////////
// 旋转环
function rotateRing() {
var canvas = _id("cRing");
var cs = canvas.getContext("2d");
// 画布中心
var centerX = canvas.width/2;
var centerY = canvas.height/2
// 旋转球
var angle = 1;
setInterval(function() {
angle++;
// 绘图原点移动到画布中点中点
cs.translate(centerX,centerY);
// 旋转
cs.rotate(-Math.PI/180);
// 移动画布原点
cs.translate(-centerX,-centerY);
ring(canvas,cs);
if (angle == 360) {
angle = 0;
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
}
}, 15);
}
// 环形
function ring(canvas,cs) {
// 画布width:200,height:200
// 渐变色
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0.2,"#E8BEFD");
grd.addColorStop(0.4,"#E1EAD9");
grd.addColorStop(0.6,"#7F65CA");
grd.addColorStop(0.8,"#88DFCF");
cs.strokeStyle = grd;
// 开始画
// 大圈
cs.beginPath();
cs.lineWidth = 5;
cs.arc(100,100,80,0,2*Math.PI);
cs.stroke();
// 小圈
cs.beginPath();
cs.arc(180,100,10,0,2*Math.PI);
cs.stroke();
}
////////////////////////////////////////////////////////////////////////////////
// 左上棉花糖1
function marshmallowOne(word) {
//画布width:200,height:200
var canvas = _id("cMarshmallow1");
var cs = canvas.getContext("2d");
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 阴影
cs.shadowBlur=10;
cs.shadowOffsetX=8;
cs.shadowOffsetY=8;
cs.shadowColor="#B8B8BA";
// 渐变色
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0.2,"#E8BEFD");
grd.addColorStop(0.4,"#E1EAD9");
grd.addColorStop(0.6,"#7F65CA");
grd.addColorStop(0.8,"#88DFCF");
cs.fillStyle = grd;
// 开始画棉花糖
// 身体
cs.beginPath();
cs.moveTo(25,50);
cs.lineTo(25,150);
cs.quadraticCurveTo(100,190,175,150);
cs.lineTo(175,50);
cs.fill();
// 头
cs.beginPath();
cs.moveTo(175,50);
cs.quadraticCurveTo(100,10,25,50);
cs.quadraticCurveTo(100,90,175,50);
cs.fill();
// 左手
cs.lineWidth = 5;
cs.lineCap = "round";
cs.beginPath();
cs.moveTo(25,100);
cs.quadraticCurveTo(5,120,15,165);
cs.strokeStyle = grd;
cs.stroke();
// 右手
cs.beginPath();
cs.moveTo(175,100);
cs.quadraticCurveTo(195,120,185,165);
cs.stroke();
// 左眼睛
cs.beginPath();
cs.arc(70,100,10,0,2*Math.PI);
cs.fillStyle = "black";
cs.fill();
// 右眼睛
cs.beginPath();
cs.arc(130,100,10,0,2*Math.PI);
cs.fill();
// 嘴
cs.lineWidth = 2;
cs.lineCap = "butt";
cs.beginPath();
cs.arc(108,110,7,0,Math.PI,false);
cs.arc(92,110,7,0,Math.PI,false);
cs.strokeStyle = "black";
cs.stroke();
// 写字
// 渐变色
var grd=cs.createLinearGradient(0,0,2*canvas.width,0);
grd.addColorStop(0,"#673EA4");
grd.addColorStop(0.3,"#BD2184");
grd.addColorStop(0.6,"#E7106E");
grd.addColorStop(1.0,"#F92F47");
cs.fillStyle = grd;
cs.font = "25px Arial";
cs.textAlign = "center";
// word动态产生
cs.fillText(word,100,195,195);
}
////////////////////////////////////////////////////////////////////////////////
// 中间棉花糖2
function marshmallowTwo(word) {
// width:200,height:200
var canvas = _id("cMarshmallow2");
var cs = canvas.getContext("2d");
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 阴影
cs.shadowBlur=10;
cs.shadowOffsetX=8;
cs.shadowOffsetY=8;
cs.shadowColor="#B8B8BA";
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,canvas.height);
grd.addColorStop(0.3,"#E8CCF7");
grd.addColorStop(0.5,"#D270EB");
grd.addColorStop(0.7,"#F180FE");
grd.addColorStop(0.9,"#F583F2");
cs.fillStyle = grd;
// 开始画棉花糖
// 身体
cs.beginPath();
cs.moveTo(25,50);
cs.lineTo(25,150);
cs.quadraticCurveTo(100,190,175,150);
cs.lineTo(175,50);
cs.fill();
// 头
cs.beginPath();
cs.moveTo(175,50);
cs.quadraticCurveTo(100,10,25,50);
cs.quadraticCurveTo(100,90,175,50);
cs.fill();
// 左手
cs.lineWidth = 5;
cs.lineCap = "round";
cs.beginPath();
cs.moveTo(25,100);
cs.quadraticCurveTo(5,70,15,35);
cs.strokeStyle = grd;
cs.stroke();
// 右手
cs.beginPath();
cs.moveTo(175,100);
cs.quadraticCurveTo(195,70,185,35);
cs.stroke();
// 左眼睛
cs.beginPath();
cs.arc(70,100,10,0,2*Math.PI);
cs.fillStyle = "black";
cs.fill();
// 右下眼睛
cs.beginPath();
cs.moveTo(120,100);
cs.quadraticCurveTo(130,95,140,100);
cs.strokeStyle = "black";
cs.stroke();
// 右上眼睛
cs.beginPath();
cs.moveTo(120,100);
cs.quadraticCurveTo(125,88,140,90);
cs.stroke();
// 嘴
cs.lineWidth = 2;
cs.lineCap = "butt";
cs.beginPath();
cs.arc(100,110,7,0,Math.PI,false);
cs.stroke();
// 写字
var grd=cs.createLinearGradient(0,0,2*canvas.width,0);
grd.addColorStop(0,"#C92BA0");
grd.addColorStop(0.3,"#A942B6");
grd.addColorStop(0.6,"#662C80");
grd.addColorStop(1.0,"#AD5DD4");
cs.fillStyle = grd;
cs.font = "25px Arial";
cs.textAlign = "center";
cs.fillText(word,100,25,195);
}
////////////////////////////////////////////////////////////////////////////////
// 右上棉花糖3
function marshmallowThere(word) {
// width:200,height:200
var canvas = _id("cMarshmallow3");
var cs = canvas.getContext("2d");
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 阴影
cs.shadowBlur=10;
cs.shadowOffsetX=8;
cs.shadowOffsetY=8;
cs.shadowColor="#B8B8BA";
// 渐变色
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0.2,"#E8BEFD");
grd.addColorStop(0.4,"#E1EAD9");
grd.addColorStop(0.6,"#7F65CA");
grd.addColorStop(0.8,"#88DFCF");
cs.fillStyle = grd;
// 开始画棉花糖
// 身体
cs.beginPath();
cs.moveTo(25,50);
cs.lineTo(25,150);
cs.quadraticCurveTo(100,190,175,150);
cs.lineTo(175,50);
cs.fill();
// 头
cs.beginPath();
cs.moveTo(175,50);
cs.quadraticCurveTo(100,10,25,50);
cs.quadraticCurveTo(100,90,175,50);
cs.fill();
// 左手
cs.lineWidth = 5;
cs.lineCap = "round";
cs.beginPath();
cs.moveTo(25,100);
cs.quadraticCurveTo(-5,120,25,120);
cs.strokeStyle = grd;
cs.stroke();
// 右手
cs.beginPath();
cs.moveTo(175,100);
cs.quadraticCurveTo(205,120,175,120);
cs.stroke();
// 左眼睛
cs.beginPath();
cs.arc(70,100,10,0,2*Math.PI);
cs.fillStyle = "black";
cs.fill();
// 右眼睛
cs.beginPath();
cs.arc(130,100,10,0,2*Math.PI);
cs.fill();
// 左眉毛
cs.beginPath();
cs.moveTo(80,86);
cs.lineTo(65,80);
cs.strokeStyle = "black";
cs.stroke();
// 右眉毛
cs.beginPath();
cs.moveTo(120,86);
cs.lineTo(135,80);
cs.stroke();
// 嘴
cs.lineWidth = 2;
cs.lineCap = "butt";
cs.beginPath();
cs.arc(100,115,7,0,Math.PI,true);
cs.strokeStyle = "black";
cs.stroke();
// 写字
var grd=cs.createLinearGradient(0,0,2*canvas.width,0);
grd.addColorStop(0,"#673EA4");
grd.addColorStop(0.3,"#BD2184");
grd.addColorStop(0.6,"#E7106E");
grd.addColorStop(1.0,"#F92F47");
cs.fillStyle = grd;
cs.font = "25px Arial";
cs.textAlign = "center";
cs.fillText(word,100,195,195);
}
////////////////////////////////////////////////////////////////////////////////
// 左下棉花糖4
function marshmallowFour(word) {
// width:200,height:200
var canvas = _id("cMarshmallow4");
var cs = canvas.getContext("2d");
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 阴影
cs.shadowBlur=10;
cs.shadowOffsetX=8;
cs.shadowOffsetY=8;
cs.shadowColor="#B8B8BA";
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0.2,"#ACDAE2");
grd.addColorStop(0.4,"#D5D0F1");
grd.addColorStop(0.6,"#E7CAF7");
grd.addColorStop(0.8,"#C2A7F6");
cs.fillStyle = grd;
// 开始画棉花糖
// 身体
cs.beginPath();
cs.moveTo(25,50);
cs.lineTo(25,150);
cs.quadraticCurveTo(100,190,175,150);
cs.lineTo(175,50);
cs.fill();
// 头
cs.beginPath();
cs.moveTo(175,50);
cs.quadraticCurveTo(100,10,25,50);
cs.quadraticCurveTo(100,90,175,50);
cs.fill();
// 左手
cs.lineWidth = 5;
cs.lineCap = "round";
cs.beginPath();
cs.moveTo(25,100);
cs.quadraticCurveTo(5,120,15,165);
cs.strokeStyle = grd;
cs.stroke();
// 右手
cs.beginPath();
cs.moveTo(175,100);
cs.quadraticCurveTo(205,120,175,120);
cs.stroke();
// 左眼睛
cs.lineWidth = 4;
cs.beginPath();
cs.arc(70,100,10,0,2*Math.PI);
cs.strokeStyle = "black";
cs.stroke();
// 右眼睛
cs.beginPath();
cs.arc(130,100,10,0,2*Math.PI);
cs.stroke();
// 嘴横
cs.lineWidth = 3;
cs.beginPath();
cs.moveTo(90,115);
cs.lineTo(110,115);
cs.stroke();
// 嘴左竖
cs.lineWidth = 3;
cs.beginPath();
cs.moveTo(90,110);
cs.lineTo(90,120);
cs.stroke();
// 嘴右竖
cs.lineWidth = 3;
cs.beginPath();
cs.moveTo(110,110);
cs.lineTo(110,120);
cs.stroke();
// 写字
var grd=cs.createLinearGradient(0,0,2*canvas.width,0);
grd.addColorStop(0,"blue");
grd.addColorStop(0.3,"white");
grd.addColorStop(0.6,"#E7CAF7");
grd.addColorStop(1,"#C2A7F6");
cs.fillStyle = grd;
cs.font = "25px Arial";
cs.textAlign = "center";
cs.fillText(word,100,195,195);
}
////////////////////////////////////////////////////////////////////////////////
//右下棉花糖5
function marshmallowFive(word) {
// width:200,height:200
var canvas = _id("cMarshmallow5");
var cs = canvas.getContext("2d");
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 阴影
cs.shadowBlur=10;
cs.shadowOffsetX=8;
cs.shadowOffsetY=8;
cs.shadowColor="#B8B8BA";
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0.2,"#ACDAE2");
grd.addColorStop(0.4,"#D5D0F1");
grd.addColorStop(0.6,"#E7CAF7");
grd.addColorStop(0.8,"#C2A7F6");
cs.fillStyle = grd;
// 开始画棉花糖
// 身体
cs.beginPath();
cs.moveTo(25,50);
cs.lineTo(25,150);
cs.quadraticCurveTo(100,190,175,150);
cs.lineTo(175,50);
cs.fill();
// 头
cs.beginPath();
cs.moveTo(175,50);
cs.quadraticCurveTo(100,10,25,50);
cs.quadraticCurveTo(100,90,175,50);
cs.fill();
// 左手
cs.lineWidth = 5;
cs.lineCap = "round";
cs.beginPath();
cs.moveTo(25,100);
cs.quadraticCurveTo(-5,120,25,120);
cs.strokeStyle = grd;
cs.stroke();
// 右手
cs.beginPath();
cs.moveTo(175,100);
cs.quadraticCurveTo(195,120,185,165);
cs.stroke();
// 左眼睛
cs.beginPath();
cs.arc(70,100,10,0,2*Math.PI);
cs.fillStyle = "black";
cs.fill();
// 右眼睛
cs.beginPath();
cs.arc(130,100,10,0,2*Math.PI);
cs.fill();
// 左眉毛
cs.beginPath();
cs.moveTo(80,86);
cs.lineTo(65,80);
cs.strokeStyle = "black";
cs.stroke();
// 右眉毛
cs.beginPath();
cs.moveTo(120,86);
cs.lineTo(135,80);
cs.stroke();
// 嘴
cs.lineWidth = 2;
cs.lineCap = "butt";
cs.beginPath();
cs.arc(100,110,7,0,Math.PI,false);
cs.closePath();
cs.strokeStyle = "black";
cs.stroke();
// 写个字
var grd=cs.createLinearGradient(0,0,2*canvas.width,0);
grd.addColorStop(0,"blue");
grd.addColorStop(0.3,"white");
grd.addColorStop(0.6,"#E7CAF7");
grd.addColorStop(1,"#C2A7F6");
cs.fillStyle = grd;
cs.font = "25px Arial";
cs.textAlign = "center";
cs.fillText(word,100,195,195);
}
////////////////////////////////////////////////////////////////////////////////
// 移动波浪
function moveWave() {
// 获取画布
var canvas = _id("cWave");
var cs = canvas.getContext("2d");
var cWidth = screen.width;
var cHeight = 200;
// 屏幕左边外面2条曲线
// 起点1
var x1 = -cWidth;
// 控制点1
var cX1 = -3*cWidth/4;
// 起点2
var x2 = -cWidth/2;
// 控制点2
var cX2 = -cWidth/4;
// 屏幕里面两条曲线
// 起点3
var x3 = 0;
// 控制点3
var cX3 = cWidth/4;
// 起点4
var x4 = cWidth/2;
// 控制点4
var cX4 = 3*cWidth/4;
// 终点
var x5 = cWidth;
// 移动
var step = 10;
setInterval(function() {
x1+=step;
cX1+=step;
x2+=step;
cX2+=step;
x3+=step;
cX3+=step;
x4+=step;
cX4+=step;
x5+=step;
cs.clearRect(0,0,canvas.width,canvas.height);
wave(canvas, cs, cWidth, cHeight, x1, cX1, x2, cX2, x3, cX3, x4, cX4, x5);
if (x1 >= 0) {
x1 = -cWidth;
cX1 = -3*cWidth/4;
x2 = -cWidth/2;
cX2 = -cWidth/4;
x3 = 0;
cX3 = cWidth/4;
x4 = cWidth/2;
cX4 = 3*cWidth/4;
x5 = cWidth;
}
}, 30);
}
// 波浪
function wave(canvas,cs,cWidth,cHeight,x1,cX1,x2,cX2,x3,cX3,x4,cX4,x5) {
// 峰值
var peakY = cHeight/6;
// 绘制矩形
// 渐变色,看起来更像是水底
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0.2,"#E0F0F5");
grd.addColorStop(0.9,"#1C67C4");
cs.fillStyle = grd;
cs.fillRect(0,cHeight/6,cWidth,5*cHeight/6);
// 第一段波浪
cs.beginPath();
cs.moveTo(x1,peakY);
cs.quadraticCurveTo(cX1,0,x2,peakY);
cs.fill();
// 第二段波浪
cs.beginPath();
cs.moveTo(x2,peakY);
cs.quadraticCurveTo(cX2,cHeight/3,x3,peakY);
cs.fillStyle="white";
cs.fill();
// 第三段波浪
cs.beginPath();
cs.moveTo(x3,peakY);
cs.quadraticCurveTo(cX3,0,x4,peakY);
cs.fillStyle = grd;
cs.fill();
// 第四段波浪
cs.beginPath();
cs.moveTo(x4,peakY);
cs.quadraticCurveTo(cX4,cHeight/3,x5,peakY);
cs.fillStyle="white";
cs.fill();
}
////////////////////////////////////////////////////////////////////////////////
// 游动的鱼
function moveFish() {
// 获取画布
var canvas = _id("cFish");
var cs = canvas.getContext("2d");
var cWidth = screen.width;
var cHeight = 200;
// 加阴影
cs.shadowBlur=20;
cs.shadowOffsetX=25;
cs.shadowOffsetY=25;
cs.shadowColor="black";
// 横向移动基准点-650
var baseX = -650;
// 移动
setInterval(function() {
// 横向控制
baseX+=10;
// 清空画
cs.clearRect(0,0,canvas.width,canvas.height);
// 重画
fish(canvas,cs,cWidth,cHeight,baseX);
if (baseX > 11*screen.width) {
baseX = -650;
}
}, 20);
}
// 鱼
function fish(canvas,cs,cWidth,cHeight,baseX) {
// 渐变色
var grd=cs.createLinearGradient(0,0,0,canvas.height);
grd.addColorStop(0.2,"#E8BEFD");
grd.addColorStop(0.4,"#E1EAD9");
grd.addColorStop(0.6,"#7F65CA");
grd.addColorStop(0.8,"#88DFCF");
cs.strokeStyle = grd;
// 开始画
cs.lineWidth = 3;
cs.beginPath();
// 头
cs.arc(baseX/10,cHeight/2,60,0.24*Math.PI,1.1*Math.PI,true);
// 上腰
cs.quadraticCurveTo(baseX/10 - 75,cHeight/2 + 15,baseX/10 - 80,cHeight/2 - 20);
// 上尾
cs.quadraticCurveTo(baseX/10 - 55,cHeight/2 - 25,baseX/10 - 60,cHeight/2 - 50);
cs.quadraticCurveTo(baseX/10 - 80,cHeight/2 - 50,baseX/10 - 90,cHeight/2 - 35);
// 下尾
cs.quadraticCurveTo(baseX/10 - 100,cHeight/2 - 55,baseX/10 - 120,cHeight/2 - 40);
cs.quadraticCurveTo(baseX/10 - 120,cHeight/2 - 20,baseX/10 - 95,cHeight/2 - 15);
// 下腰
cs.quadraticCurveTo(baseX/10 - 90,cHeight/2 + 30,baseX/10 - 30,cHeight/2 + 40);
// 右鱼鳍
cs.quadraticCurveTo(baseX/10 - 30,cHeight/2 + 50,baseX/10 - 25,cHeight/2 + 55);
cs.quadraticCurveTo(baseX/10 - 20,cHeight/2 + 45,baseX/10 - 15,cHeight/2 + 45);
// 下腰
cs.quadraticCurveTo(baseX/10 + 25,cHeight/2 + 50,baseX/10 + 45,cHeight/2 + 40);
cs.stroke();
// 单独的下腰
cs.beginPath();
cs.moveTo(baseX/10 - 82,cHeight/2 + 16);
cs.quadraticCurveTo(baseX/10 - 40,cHeight/2 + 60,baseX/10,cHeight/2 + 55);
// 左鱼鳍
cs.quadraticCurveTo(baseX/10,cHeight/2 + 60,baseX/10 + 5,cHeight/2 + 63);
cs.quadraticCurveTo(baseX/10 + 5,cHeight/2 + 60,baseX/10 + 10,cHeight/2 + 54);
cs.quadraticCurveTo(baseX/10 + 28,cHeight/2 + 52,baseX/10 + 45,cHeight/2 + 40);
cs.stroke();
// 嘴
cs.beginPath();
cs.moveTo(baseX/10 + 47,cHeight/2 + 37);
cs.quadraticCurveTo(baseX/10 + 20,cHeight/2 + 45,baseX/10 + 15,cHeight/2 + 33);
cs.stroke();
// 眼睛
cs.beginPath();
cs.arc(baseX/10 + 5,cHeight/2 + 24,7,0,2*Math.PI);
cs.stroke();
// 眼珠
cs.beginPath();
cs.arc(baseX/10 + 6,cHeight/2 + 23,5,0,2*Math.PI);
cs.fillStyle = "black";
cs.fill();
// 满足条件,触发喷水
if ((baseX > 0.5*cWidth && baseX < 2*cWidth) || (baseX > 3*cWidth && baseX < 4*cWidth)
|| (baseX > 5*cWidth && baseX < 6*cWidth) || (baseX > 7*cWidth && baseX < 8.5*cWidth)) {
sprayWater(baseX, cHeight, cs);
}
}
// 喷水
function sprayWater(baseX,cHeight,cs) {
// 喷水,水滴1
cs.beginPath();
cs.moveTo(baseX/10,cHeight/2 - 60);
cs.quadraticCurveTo(baseX/10 - 5,cHeight/2 - 68,baseX/10,cHeight/2 - 68);
cs.quadraticCurveTo(baseX/10 + 5,cHeight/2 - 68,baseX/10,cHeight/2 - 60);
cs.stroke();
// 水滴2
cs.beginPath();
cs.moveTo(baseX/10,cHeight/2 - 73);
cs.quadraticCurveTo(baseX/10 - 5,cHeight/2 - 81,baseX/10,cHeight/2 - 81);
cs.quadraticCurveTo(baseX/10 + 5,cHeight/2 - 81,baseX/10,cHeight/2 - 73);
cs.stroke();
// 水滴3
cs.beginPath();
cs.moveTo(baseX/10,cHeight/2 - 86);
cs.quadraticCurveTo(baseX/10 - 5,cHeight/2 - 94,baseX/10,cHeight/2 - 94);
cs.quadraticCurveTo(baseX/10 + 5,cHeight/2 - 94,baseX/10,cHeight/2 - 86);
cs.stroke();
// 左边水滴1
cs.beginPath();
cs.moveTo(baseX/10 - 10,cHeight/2 - 90);
cs.quadraticCurveTo(baseX/10 - 20,cHeight/2 - 92,baseX/10 - 20,cHeight/2 - 86);
cs.quadraticCurveTo(baseX/10 - 15,cHeight/2 - 82,baseX/10 - 10,cHeight/2 - 90);
cs.stroke()
// 右边水滴1
cs.beginPath();
cs.moveTo(baseX/10 + 10,cHeight/2 - 90);
cs.quadraticCurveTo(baseX/10 + 20 ,cHeight/2 - 92,baseX/10 + 20,cHeight/2 - 86);
cs.quadraticCurveTo(baseX/10 + 15,cHeight/2 - 82,baseX/10 + 10,cHeight/2 - 90);
cs.stroke()
}
////////////////////////////////////////////////////////////////////////////////
// 模拟心跳
function heartbeat(word) {
var canvas = _id("cHeart");
var cs = canvas.getContext("2d");
// 添加阴影
cs.shadowBlur=30;
cs.shadowOffsetX=20;
cs.shadowOffsetY=20;
cs.shadowColor="black";
// 变大
var isBig = false;
// 每隔500毫秒跳一次
var heartbeatId = setInterval(function() {
// 模拟跳动的情况
if (!isBig) {
// 放大
cs.scale(1.03,1.03);
isBig = true;
} else {
// 缩小
cs.scale(0.97,0.97);
isBig = false;
}
cs.clearRect(0,0,canvas.width,canvas.height);
heartShape(canvas,cs,word);
}, 500);
return heartbeatId;
}
// 心形
function heartShape(canvas,cs,word) {
// 开始画心形
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,canvas.height);
grd.addColorStop(0.22,"#FCEFF9");
grd.addColorStop(0.4,"#FF5681");
grd.addColorStop(0.8,"#F47BA8");
cs.fillStyle = grd;
// 左上半圆
cs.beginPath();
cs.arc(200,200,100,0,Math.PI,true);
// 左下弧形
cs.quadraticCurveTo(90,340,300,450);
// 右下弧形
cs.quadraticCurveTo(510,340,500,200);
// 右上半圆
cs.arc(400,200,100,0,Math.PI,true);
cs.fill();
// 写字
cs.font="30px Arial";
cs.textAlign = "center"
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"#C2A7F6");
grd.addColorStop(0.2,"white");
grd.addColorStop(0.4,"#E7CAF7");
grd.addColorStop(0.8,"#C2A7F6");
cs.strokeStyle = grd;
cs.strokeText(word,300,250,350);
}
// 点击心动按钮执行
function clickHeart(heartbeatId,word) {
// 取消心跳,隐藏按钮
clearInterval(heartbeatId);
_setStyle(_id("choice"), "display", "none");
// 获取画布
var canvas = _id("cHeart");
var cs = canvas.getContext("2d");
// 设置文字
cs.font="30px Arial";
cs.textAlign = "center"
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"#C92BA0");
grd.addColorStop(0.2,"#A942B6");
grd.addColorStop(0.4,"#662C80");
grd.addColorStop(0.8,"#AD5DD4");
cs.strokeStyle = grd;
cs.strokeText(heartRep,300,300,300);
// 保存当前状态,根据心形是否变大判断,避免每次点击后心形都是放大状态,以后会越变越大,解决方法为动态增删画心画布
// 1秒之后
setTimeout(function() {
// 定时消失
var shrink = 10;
var id = setInterval(function() {
// 缩小
cs.scale(0.8,0.8);
heartShape(canvas, cs, word);
cs.strokeStyle = grd;
cs.strokeText(heartRep,300,300,300);
if (shrink == 0) {
clearInterval(id);
cs.clearRect(0,0,5*canvas.width,5*canvas.height);
// 删除画布
canvas.remove();
// 取消其中一个棉花糖被点状态
isClick = false;
}
shrink--;
}, 300);
}, 1500);
}
// 心碎动画,点击淘汰按钮执行
function clickOut(heartbeatId) {
// 取消心跳,隐藏按钮
clearInterval(heartbeatId);
_setStyle(_id("choice"), "display", "none");
// 获取画布
var canvas = _id("cHeart");
var cs = canvas.getContext("2d");
// 添加阴影
cs.shadowBlur=30;
cs.shadowOffsetX=20;
cs.shadowOffsetY=20;
cs.shadowColor="black";
// 设置文字
cs.font="30px Arial";
cs.textAlign = "center"
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,0);
grd.addColorStop(0,"#C92BA0");
grd.addColorStop(0.2,"#A942B6");
grd.addColorStop(0.4,"#662C80");
grd.addColorStop(0.8,"#AD5DD4");
cs.strokeStyle = grd;
cs.strokeText(heartOut,300,300,300);
// 采用画布整体下落
var y = 20;
setTimeout(function() {
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 心碎
heartBreakShape(canvas, cs);
var id = setInterval(function() {
y++;
// 移动画布
_setStyle(canvas, "top", y + "px");
if (y >= screen.height - 200) {
clearInterval(id);
// 清空画布
cs.clearRect(0,0,canvas.width,canvas.height);
// 删除画布
canvas.remove();
// 取消其中一个棉花糖被点状态
isClick = false;
}
}, 10);
}, 1500);
}
// 心碎形状
function heartBreakShape(canvas,cs) {
// 画心碎
// 渐变色
var grd=cs.createLinearGradient(0,0,canvas.width,canvas.height);
grd.addColorStop(0.25,"#FCEFF9");
grd.addColorStop(0.5,"#FF5681");
grd.addColorStop(0.7,"#F47BA8");
cs.fillStyle = grd;
// 左半部分
// 左上半圆
cs.beginPath();
cs.arc(175,200,100,0,Math.PI,true);
// 左下弧形
cs.quadraticCurveTo(90,340,290,450);
// 往上收,锯齿形
cs.lineTo(300,430);
cs.lineTo(280,370);
cs.lineTo(310,270);
cs.fill();
// 右半部分
// 右下弧形
cs.beginPath();
cs.moveTo(330,450);
cs.quadraticCurveTo(510,340,525,200);
// 右上半圆
cs.arc(425,200,100,0,Math.PI,true);
cs.lineTo(360,270);
cs.lineTo(330,370);
cs.lineTo(350,430);
cs.fill();
}
////////////////////////////////////////////////////////////////////////////////
// 设置表白的话
function setWord() {
// 每隔3秒的时间,更新棉花糖上显示的文字内容
setInterval(function() {
var word1 = words[parseInt(Math.random()*words.length)];
var word2 = words[parseInt(Math.random()*words.length)];
var word3 = words[parseInt(Math.random()*words.length)];
var word4 = words[parseInt(Math.random()*words.length)];
var word5 = words[parseInt(Math.random()*words.length)];
// 设置到标签中
_setHtml("cMarshmallow1", word1);
_setHtml("cMarshmallow2", word2);
_setHtml("cMarshmallow3", word3);
_setHtml("cMarshmallow4", word4);
_setHtml("cMarshmallow5", word5);
// 画到界面上
marshmallowOne(word1);
marshmallowTwo(word2);
marshmallowThere(word3);
marshmallowFour(word4);
marshmallowFive(word5);
}, 2500);
}
</script>
</html>