论坛 › 【代码图腾】 › 做个Canvas试验看看

195400 发表于 2021-2-2 11:11

做个Canvas试验看看

        <canvas id = "can0" width="800" height="600"
        style="border:thick yellow double; overflow:hidden;
        border-radius:24px;background-color:#333;">
        您的浏览器不支持Canvas</canvas>
       
        <script>
                var can = document.getElementById("can0");
                var ctx = can.getContext("2d");
                ctx.font="2em 微软雅黑";
                var x = 100;
               
                //ball
                function mTxt(x,y,txt,sty,spx,spy){
                        this.x = x;
                        this.y = y;
                        this.sty = sty;
                        this.txt = txt;
                        this.spx = spx;
                        this.spy = spy;
                }
                //改变位置
                mTxt.prototype.update = function(){
                        this.x += this.spx;
                        if(this.x > 750)        {
                                if(this.spx > 0)        this.spx = -this.spx;
                        }
                        else if(this.x < 20)         {
                                if(this.spx < 0)        this.spx = -this.spx;
                        }
                               
                        this.y += this.spy;
                        if(this.y > 550)        {
                                if(this.spy > 0)        this.spy = -this.spy;
                        }
                        else if(this.y < 20)         {
                                if(this.spy < 0)        this.spy = -this.spy;
                        }
                }
                //呈现这个小球
                mTxt.prototype.render = function(){
                        ctx.strokeStyle=this.sty;
                        ctx.strokeText(this.txt,this.x,this.y);
                        //-------------------------------------------//
                }
                var objArr = [];
                for(var i = 0; i < 5; i++) {
                        //x,y,txt,cl,spx,spy
                        //var r = parseInt(Math.random()*60 + 2);
                        var spx = parseInt(Math.random()*20 - 15);
                        var spy = parseInt(Math.random()*20 - 15);
                       
                        var grd=ctx.createLinearGradient(50,50,750,550);
                        grd.addColorStop(0,"rgba("+parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)
                                                        +",0.7)");
                        grd.addColorStop("0.3","rgba("+parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)
                                                        +",0.7)");
                        grd.addColorStop("0.5","rgba("+parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)
                                                        +",0.7)");
                        grd.addColorStop("0.6","rgba("+parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)
                                                        +",0.7)");
                        grd.addColorStop("0.8","rgba("+parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)
                                                        +",0.7)");
                        grd.addColorStop(1,"rgba("+parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)+","
                                                        +parseInt(Math.random()*256)
                                                        +",0.7)");
                        var posx = parseInt(Math.random()*400)+40;
                        var posy = parseInt(Math.random()*300)+30;
                       
                        var ball = new mTxt(posx, posy,"中画网的朋友们大家好！" ,grd,spx,spy);
                        objArr = ball;
                }
               
                setInterval(function(){
                        ctx.clearRect(0,0,800,600);
                        //ctx.fillStyle ="black";
                        //ctx.fillRect(0,0,800,600);
                        for(var i = 0; i< objArr.length;i++){
                                objArr.update();
                                objArr.render();
                        }
                },200);
       
        </script>

七掬 发表于 2021-2-2 13:58

这是啥啥 呢

醉心笑 发表于 2021-2-2 16:13

要是自己做的代码，还是挺厉害的，反正我不会，看人家什么都厉害

195400 发表于 2021-2-3 11:07

<style type="text/css">
        #animstar1        {
                border:thick double yellow;
                overflow:hidden;border-radius:24px;
                background-size:cover;
                background-color:#aac;background-image:url(http://img.mp.itc.cn/upload/20170714/c79bf5a4a05b4332949b68609099ea23_th.jpg);
        }
</style>
<canvas id="animstar1" width="800" height="600"        >您的浏览器不支持Canvas标签</canvas>

<!-- script type="text/javascript" src="canvasObj.js"></script -->
<script type="text/javascript" >
!window.Star && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/canvasObj.js" charset="utf-8"><\/script>');
</script>
<script>
        var can = document.getElementById("animstar1");
        var ctxStar = can.getContext("2d");

        var objStar = [];
        for(var i = 0; i < 25; i++) {
                var spx = parseInt(Math.random()*20 - 15);
                var spy = parseInt(Math.random()*20 - 15);
                var cl = "rgba("+parseInt(Math.random()*256)+","
                                                +parseInt(Math.random()*256)+","
                                                +parseInt(Math.random()*256)
                                                +",0.7)";
                var posx = parseInt(Math.random()*400)+40;
                var posy = parseInt(Math.random()*300)+30;
                var lw = parseInt(Math.random()*80) + 10;
                var sPara = {
                        x: posx, y:posy,         //        起始位置坐标
                        l:lw, sty :cl,                 //        边长、颜色
                        spx:spx, spy:spy,         //        移动的步长
                        width:can.width, height:can.height, //画布的尺寸
                        ctx: ctxStar        //        画布的Context
                };
                               
                var star = new Star(sPara);
                objStar = star;
        }
               
        setInterval(function(){
                ctxStar.clearRect(0,0,800,600);
                for(var i = 0; i< objStar.length;i++){
                        objStar.update();
                        objStar.render();
                }
        },50);

</script>

195400 发表于 2021-2-3 11:09

七掬 发表于 2021-2-2 13:58
这是啥啥 呢

没有漂亮的画面， 没有动听的歌声， 这就是个关于Canvas的代码试验:L

195400 发表于 2021-2-3 11:10

醉心笑 发表于 2021-2-2 16:13
要是自己做的代码，还是挺厉害的，反正我不会，看人家什么都厉害

谢谢您的关注， 一个代码试验而已。

七掬 发表于 2021-2-3 11:25

195400 发表于 2021-2-3 11:09
没有漂亮的画面， 没有动听的歌声， 这就是个关于Canvas的代码试验

哈哈，看来你是程序号之类的？

195400 发表于 2021-2-4 07:40

七掬 发表于 2021-2-3 11:25
哈哈，看来你是程序号之类的？

“程序号”是个么东西？

七掬 发表于 2021-2-4 08:47

195400 发表于 2021-2-4 07:40
“程序号”是个么东西？

打错了，程序员，哈哈

195400 发表于 2021-2-4 09:14

七掬 发表于 2021-2-4 08:47
打错了，程序员，哈哈

程序员是年轻人的行当，退休老头一个就别做梦了:L

查看完整版本: 做个Canvas试验看看