<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<style>
@font-face {
font-family:"sor";
src:url('fonts/FZZBHFW.TTF');
}
@font-face {
font-family:"sy";
src:url('fonts/gangbixingshu.TTF');
}
body{margin: 0; padding: 0; font-family:"sy";}
#canvas{display: block; margin: 0 auto; font-family: "sy";}
.bu{border: none; padding: 10px;display: block;margin: 0 auto;}
#bt1,#bt2,#bt3{height: 30px;display: block;margin: 10px;margin: 10px auto;width: 200px;}
#bt3{height: 300px;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<input onclick="draw()" type="button" value="test" class="bu" />
<input id="bt1" />
<input id="bt2" />
<textarea id="bt3"></textarea>
</body>
<script type="text/javascript">
function draw() {
var c=document.getElementById("canvas")
var ctx = c.getContext('2d');
var img = new Image();
var bt1=document.getElementById("bt1").value;
var bt2=document.getElementById("bt2").value;
var bt3=document.getElementById("bt3").value;
ctx.clearRect(0,0,800,800)
img.onload = function(){
ctx.drawImage(img,0,0,800,800);
ctx.beginPath();
var biaoti=bt1
var bw=(biaoti.length)*60/2;
ctx.fillStyle = '#FFFFFF';
ctx.font = "60px sy";
ctx.textBaseline = 'top';
ctx.fillText(biaoti, 800/2-bw, 5);
var biaoti1=bt2
ctx.fillStyle = '#FFFFFF';
ctx.font = "30px sy";
ctx.textBaseline = 'top';
ctx.fillText(biaoti1, (800/2-bw)+30, 70);
var biaoti2=bt3
// var bw=(biaoti2.length)*30/2;
// var bww=(biaoti2.length)*30;
var linewidth=0;
var inneheight= 100 //距离顶部距离
var lastSubStrIndex=0;
for(var i=0; i<biaoti2.length; i++){
linewidth+=ctx.measureText(biaoti2[i]).width;
if(linewidth>800-50){
ctx.fillText(biaoti2.substring(lastSubStrIndex,i),0,inneheight);
inneheight+=40;
linewidth=0;
lastSubStrIndex=i;
}
if(i==biaoti2.length-1){
ctx.fillText(biaoti2.substring(lastSubStrIndex,i+1),0,inneheight)
}
}
}
img.src ="img/1-5.jpg";
}
</script>
</html>
Lemon156