<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<img id="img" width="50px" height="50px" src="">
<script>
function createImg(distance, color,text) {
var c = document.createElement("canvas");
c.width = distance; //注意：没有单位
c.height = distance; //注意：没有单位
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.fillStyle ="green";
ctx.fillRect(0, 0, distance, distance);
ctx.moveTo (0,0);
ctx.lineTo (0,distance);
ctx.lineTo (distance,distance);
ctx.lineTo (distance,0);
ctx.lineTo (0,0);
ctx.lineWidth = 1;
ctx.strokeStyle = color;
ctx.stroke();
ctx.textAlign = 'center';
ctx.font = "bold "+distance/10+"px Arial";
ctx.fillStyle = 'yellow';
ctx.fillText(text, distance / 2, distance / 2+3);
return c.toDataURL("image/png");
}
document.getElementById('img').src= createImg(50, "red","833336")
</script>
</body>
</html>