canvas生成任意图片

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

Document

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

for(var j =0; j

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[i].draw(txt);

}

}

gender("❤");

btn.onclick = function() {

var text = txt.value;

console.log(text);

gender(text);

}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！