javascript 动态画心加文字

来源：互联网发布：led电子屏幕软件编辑：程序博客网时间：2024/05/21 10:21
<!-- javascript 动态画心+文字 -->    <!DOCTYPE html>    <html>        <head>            <meta charset="utf-8">            <title>测试</title>        </head>    <body>        <canvas id="gycanvas" ></canvas>     <script>    //铺满屏幕            var width = document.documentElement.clientWidth;            var height = document.documentElement.clientHeight;            document.getElementById("gycanvas").setAttribute("width",width);            document.getElementById("gycanvas").setAttribute("height",height);           //初始化坐标原点 获取canvas             var x0 = width/2;          var y0 = height/2;          var context = document.getElementById("gycanvas").getContext("2d");          context.fillStyle = "red"; 　          var x,y;//存储要画的点的位置和数量         var px=new Array(6000);var py=new Array(6000);//左边的点存3000个 右边的点从3001开始存var i=0;        var j=3001;        //扩大心的比例系数 通过屏幕简单估计var k = width*height*66/5201314;        //将  心  的坐标存入数组中        for(var t=-3; t<=3; t=t+0.001)          {//坐标系的 x,y            x=16*Math.pow(Math.sin(t),3);              y=13*Math.cos(t)-5*Math.cos(t*2)-2*Math.cos(t*3)-Math.cos(t*4);              //增大心              x=x*k;            y=y*k;//算出对于计算机的坐标 计算机左上角是0,0x=x0+x;y=y0-y;//存入数组if(x<x0){px[i]=x;py[i]=y;i=i+1;}if(x>x0){                px[j]=x;py[j]=y;j=j+1;}//x等于0的点就无视了 不影响大局        }        //画点 停止标志  画的点数 写的字的宽度var stop;var xin=0;var tw;//字体大小  心上 心里 我 你        var f;var xs = "哈哈哈哈";;var xl = "哈哈";;var wo="I";var ni="Y";//以上都是准备工作  下面开始画//-------------------------------------------------------------------------------        function drawxin(){//画完心if(xin==6001){//停止 clearInterval(stop);//在心上写字f = Math.min(width,height)/4;context.font=f+"px Georgia";tw = context.measureText(xs).width;var gradient=context.createLinearGradient(x0-tw/2,0,x0+tw/2,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");context.fillStyle=gradient;                context.fillText(xs,x0-tw/2,f);//粗略估计文字大小f = Math.min(width,height)/10;//在心里写字context.font=f+"px Georgia";tw = context.measureText(xl).width;context.fillText(xl,x0-tw/2,y0);//写iycontext.fillStyle="pink";context.font=f*6+"px Georgia";context.fillText(wo,0,height/2+f*3);tw = context.measureText(wo).width;context.fillText(ni,width-tw,height/2+f*3,tw);}else{//画心context.fillRect(px[xin],py[xin],1,1);xin=xin+1;}}//延时        stop=setInterval(drawxin,1);    </script>    </body>        </html>
阅读全文
0 0