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

！声明文档类型

html lang='en '

头

meta charset='UTF-8' /

标题文档/标题

style type='text/css '

/style

/head

身体

canvas id=' can ' width=' 800 ' height=' 400 '

/canvas

输入类型=' text ' id=' txt ' name=' input type=' button ' value='提交id='btn' name=' '

/body

脚本

var can=document。getelementbyid(' can ')；

var CTX=can。GetContext(' 2d ')；

var ww=can.offsetWidth

var wh=can . offset ThAT

var txt=document。查询选择或(' # txt ')；

var BTN=文档。查询选择器(' # BTN ')；

创造。原型。draw=function(txt){

CTX。begin path()；

ctx.fillStyle='红色

//ctx.arc(this.x，this.y，this.r，0，2*Math .PI)；

//CTX。fill()；

ctx.font='10px宋体；

ctx.fillText('，this.x，this。y)；

}

函数创建(I，j) {

这个。x=I；

这个。y=j；

这个。r=2；

}

功能性别(txt){

CTX。save()；

ctx.fillStyle='rgba(255，0，0，1)'；

ctx.font='400px宋体；

ctx.textAlign='中心

//CTX。文本基线='中间'；

ctx.textBaseline='中间

ctx.fillText(txt，ww/2，wh/2)；

CTX。restore()；

var imgdata=ctx.getImageData(0，0，ww，wh)；

var new data=[]；

for(var I=0；i imgdata.widthi=20) {

for(var j=0；j imgdata.heightj=20) {

var index=(j * img数据。宽度I)* 4；

if(imgdata.data[index] 126) {

var data=new create(i，j)；

newdata.push(数据);

}

}

}

ctx.clearRect(0，0，ww，wh)；

for(var I=0；i newdata.lengthi ) {

新数据[i].draw(txt)；

}

}

性别(' ');

btn.onclick=function() {

var text=txt.value

console.log(文本);

性别（文本);

}

/script

/html