<!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>
（急求在線等） 怎么辦這個canvas轉(zhuǎn)換為圖片
sdwsq
2016-11-16 10:43:06
