canvas生成任意图片

2019-09-10 郑州网站建设  

利用canvas.getImageData()函数生成任意图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style type="text/css">

 

    </style>

</head>

<body>

    <canvas id="can" width="800" height="400">

 

    </canvas>

    <input type="text"  id = "txt" name=""><input type="button" value="提交" id="btn" name="">

</body>

<script>

    var can = document.getElementById("can");

    var ctx = can.getContext("2d");

    var ww = can.offsetWidth;

    var wh = can.offsetHeight;

    var txt = document.querySelector("#txt");

    var btn = document.querySelector("#btn");

 

        create.prototype.draw = function(txt) {

            ctx.beginPath();

            ctx.fillStyle = "red";

            // ctx.arc(this.x,this.y,this.r,0,2*Math.PI);

            // ctx.fill();

            ctx.font = "10px 宋体";

 

            ctx.fillText("",this.x,this.y);

 

        }

 

        function create(i,j) {

            this.x = i;

            this.y = j;

            this.r = 2;

        }

        function gender(txt){

            ctx.save();

            ctx.fillStyle = "rgba(255,0,0,1)";

            ctx.font = "400px 宋体";

            ctx.textAlign = "center";

            //ctx.textBaseLine = "middle";

            ctx.textBaseline="middle";

            ctx.fillText(txt,ww/2,wh/2);

            ctx.restore();

            var imgdata = ctx.getImageData(0,0,ww,wh);

            var newdata = [];

            for(var i =0;i < imgdata.width;i+=20) {

                for(var j =0;j < imgdata.height;j += 20) {

                    var index = (j*imgdata.width + i)*4;

                    if(imgdata.data[index] > 126) {

                        var data = new create(i,j);

                        newdata.push(data);

                    }

                }

            }

            ctx.clearRect(0, 0, ww, wh);

            for (var i =0;i < newdata.length;i++) {

            newdata[i].draw(txt);

            }

        }

        gender("");

        btn.onclick = function() {

            var text = txt.value;

            console.日志(text);

            gender(text);

        }


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1804.html转载请标明出处,谢谢合作!
标签:
  • Canvas
  • 利用
  • canvas.getIm