<!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>
添加回答
举报
0/150
提交
取消