js canvas逐个打字并画心形

最新推荐文章于 2025-02-25 11:07:59 发布
DenggLin
最新推荐文章于 2025-02-25 11:07:59 发布
阅读量2.3k
点赞数
分类专栏： js
本文链接：https://blog.youkuaiyun.com/qq_34117170/article/details/83992937
版权
js 专栏收录该内容
45 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name ="viewport"content ="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0"/>
<title>test</title>
<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    background: #ffffec;
}

* {
    margin: 0;
    padding: 0;
}
.body{
    display: flex;
}
.left{
      display: inline-block;
    margin-top: 60px;
    margin-left: 30px;
    width: 300px;
}
.code{

  
}
#garden{
   margin-top: 60px;
    flex: 1;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
}
</style>
</head>
<!--   <body onload="defaultUrl()"> -->
<body >
    <div class="body">
    <div class="left">
        <div><span class="timeElapse"></span></div>
        <div class="code">
            <span>这是测试啊</span>
             <span>渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

使用 createLinearGradient(): </span>
        </div>
    </div>
    <img style="display:none" id="pic" src="img/heart.jpg" alt="The Scream"  width="10" height="10" />
    <canvas id="garden"></canvas>
    </div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script>
    var offsetX = $("#loveHeart").width() / 2;
    var offsetY = $("#loveHeart").height() / 2 - 55;
     var canvas=$('#garden')[0];
        canvas.width=600;
     canvas.height=500;
     var gardenCtx = canvas.getContext("2d");
      gardenCtx.beginPath();  //开始绘图
        gardenCtx.translate(250,250);  //设置绘图原点

   var pic=document.getElementById("pic");;
    (function($){
        $.fn.test=function(){
                this.each(function() {
                    var $ele=$(this),str=$ele.html(),progress=0;
                    $ele.html('');
                    var timer=setInterval(function(){
                        var current = str.substr(progress, 1);//从开始截取的长度
                        if(current=='<'){
                             progress = str.indexOf('>', progress) + 1;//从某位置开始搜索某字符
                        }
                        else{
                            progress++
                        }
                        //progress & 1 意思是2者做且运算，即progress%2==1为true
                        $ele.html(str.substring(0, progress)+ (progress & 1 ? '_' : ''));
                        if (progress >= str.length) {
                            clearInterval(timer);
                        }
                    }, 80);
                 });
                return this;//此处要写，不然不能链式调用
           
           
        }
    })(jQuery);
    function timeElapse(){
        var StartTime='2018-11-10';
        var NowTime=new Date();
        var startGetTime=new Date(StartTime).getTime();
        var nowGetTime=NowTime.getTime();
        var chaTime=(nowGetTime-startGetTime)/1000;
        var day=Math.floor(chaTime/(3600*24));
        var hour=Math.floor((chaTime%(3600*24))/3600);
        var M=Math.floor(((chaTime%(3600*24))%3600)/60);
        var S=Math.floor((((chaTime%(3600*24))%3600)%60));
        var str=day+'天'+hour+'小时'+M+'分钟'+S+'秒';
        $('.timeElapse').html(str);
    }
    //获取点
    function getHeartPoint(angle) {
        // 桃心型线的参数方程： 
        // x = 16(sinθ)^3 
        // y = 13cosθ- 5 cos 2θ - 2 cos 3θ - cos 4θ 
        var t = angle / Math.PI;
        var x = 15* (16 * Math.pow(Math.sin(t), 3));
        var y = - 15 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
        return new Array(offsetX + x, offsetY + y);
    }
    function startHeartAnimation() {
        var interval = 50;
        var angle = 10;
        var heart = new Array();
        var animationTimer = setInterval(function () {
            var bloom = getHeartPoint(angle);
                // gardenCtx.moveTo(bloom[0],bloom[1]);
                // gardenCtx.lineTo(bloom[0]+1,bloom[1]+1);
                // gardenCtx.stroke();
                gardenCtx.drawImage(pic,bloom[0],bloom[1],15,15);
                angle += 0.2;
                if(angle>=30){
                    clearInterval(animationTimer)
                }
         }, 50);
    }
    setInterval(function () {
        timeElapse();
    }, 1000);
    setTimeout(function () {
        startHeartAnimation();
    }, 1000);
    $('.code').test().css('color','#333');
    timeElapse();
    startHeartAnimation();
   
</script>
</body>

</html>
效果如下：
在这里插入图片描述