canvas+JS实现表白神器

最新推荐文章于 2024-05-19 08:45:33 发布
Friday_Z
最新推荐文章于 2024-05-19 08:45:33 发布
阅读量3.3k
点赞数 1
分类专栏： Web案例 JavaScript 文章标签： canvas JavaScript 表白神器
本文链接：https://blog.csdn.net/zcooa/article/details/80983009
版权
Web案例同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
JavaScript
2 篇文章 0 订阅
订阅专栏
H5网页，主要使用canvas画布和JS实现页面效果。
页面展示：
表白神器1
表白神器2
表白神器3
表白神器4
附源码，稍微有点多，直接复制下来就可以玩了。
<!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>