Canvas的文字API
阿新 • • 發佈：2019-02-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="position:absolute;top:50px;left:50px;border:10px ;"> <canvas id="canvas" width="500" height="300"> your browser does not support HTML5 Canvas! </canvas> <form> Text:<input id="textBox" placeholder="your text"/> Fill Or Stroke <select id="fillOrStroke"> <option value="fill">fill</option> <option value="stroke">stroke</option> <option value="both">both</option> </select><br/> fontStyle <select id="fontStyle"> <option value="normal">normal</option> <option value="italic">italic</option> <option value="oblique">oblique</option> </select> fontWeight <select id="fontWeight"> <option value="normal">normal</option> <option value="bold">bold</option> <option value="bolder">bolder</option> <option value="lighter">lighter</option> </select><br/> fontFace <select id="fontFace"> <option value="serif">serif</option> <option value="sans-serif">sans-serif</option> <option value="cursive">cursive</option> <option value="fantasy">fantasy</option> <option value="monospace">monospace</option> </select> fontSize <input type="range" id="fontSize" min="0" max="200" step="1" value="50"/> <br/> Color <input type="color" id="fontColor" value="#FF0000"> GradientTextColor 2: <input type="color" id="gradientColor" value="#000000"><br> textBaseline <select id="textBaseline"> <option value="middle">middle</option> <option value="top">top</option> <option value="bottom">bottom</option> <option value="hanging">hanging</option> <option value="alphabetic">alphabetic</option> <option value="ideographic">ideographic</option> </select> textAlign <select id="textAlign"> <option value="center">center</option> <option value="start">start</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> </select><br> textAlpha <input type="range" id="textAlpha" min="0.0" max="1.0" step="0.01" value="1.0"/> shadowColor <input type="color" id="shadowColor" value="#707070"/><br> shadow X <input type="range" id="shadow_x" value="1" min="-100" max="100" step="1"/> shadow Y <input type="range" id="shadow_y" value="1" min="-100" max="100" step="1"/><br> shadow Blur <input type="range" id="shadowBlur" value="1" min="1" max="100" step="1"> fillType <select id="fillType"> <option value="colorFill">colorFill</option> <option value="linearGradient">linearGradient</option> <option value="radialGradient">radialGradient</option> <option value="pattern">pattern</option> </select><br> CanvasWidth <input type="range" id="CanvasWidth" min="0" max="1000" step="1" value="500"> CanvasHeight <input type="range" id="CanvasHeight" min="0" max="800" step="1" value="300"><br> CanvasStyleWidth <input type="range" id="CanvasStyleWidth" min="0" max="1000" step="1" value="500"> CanvasStyleHeight <input type="range" id="CanvasStyleHeight" min="0" max="800" step="1" value="300"><br> CreateImageData<input type="button" id="CreateImageData" value="Create Image Data"><br> <textarea id="imageDataDisplay" rows=10 cols=30></textarea> </form> </div> <script> //監聽是否載入完成 window.addEventListener("load",eventWindowLoaded,false); // 封裝console.log var Debugger=function(){}; Debugger.log=function(message){ try{ console.log(message); }catch(exception){ return; } }; // 監聽事件觸發函式 // function eventWindowLoaded(){ // canvasApp(); // } // 設定Image物件onload事件處理器，如果圖片載入完畢，程式呼叫canvasApp(); function eventWindowLoaded(){ var pattern=new Image(); pattern.src="images/texture.jpg"; pattern.onload=eventAssetsLoaded; } function eventAssetsLoaded(){ canvasApp(); } // 判斷是否支援canvas function canvasSupport(){ return !!document.createElement("text").getContext; } // 主函式 function canvasApp(){ var message="your text"; var fillOrStroke="fill"; var fontStyle="normal"; var fontWeight="normal"; var fontFace="serif"; var fontSize="50"; var fontColor="#FF0000"; var textBaseline="middle"; var textAlign="center"; var textAlpha=1.0; var shadowColor="#707070"; var shadow_x=1; var shadow_y=1; var shadowBlur=1; var gradientColor="#000000"; var fillType="colorFill"; var pattern=new Image(); pattern.src="images/texture.jpg"; if(!canvasSupport){ return; }else{ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var formElement=document.getElementById("textBox"); formElement.addEventListener("keyup",textBoxChanged,false); formElement=document.getElementById("fillOrStroke"); formElement.addEventListener("change",fillOrStrokeChanged,false); formElement=document.getElementById("fontStyle"); formElement.addEventListener("change",fontStyleChanged,false); formElement=document.getElementById("fontWeight"); formElement.addEventListener("change",fontWeightChanged,false); formElement=document.getElementById("fontFace"); formElement.addEventListener("change",fontFaceChanged,false); formElement=document.getElementById("fontSize"); formElement.addEventListener("change",fontSizeChanged,false); formElement=document.getElementById("fontColor"); formElement.addEventListener("change",fontColorChanged,false); formElement=document.getElementById("textBaseline"); formElement.addEventListener("change",textBaselineChanged,false); formElement=document.getElementById("textAlign"); formElement.addEventListener("change",textAlignChanged,false); formElement=document.getElementById("textAlpha"); formElement.addEventListener("change",textAlphaChanged,false); formElement=document.getElementById("shadowColor"); formElement.addEventListener("change",shadowColorChanged,false); formElement=document.getElementById("shadow_x"); formElement.addEventListener("change",shadow_xChanged,false); formElement=document.getElementById("shadow_y"); formElement.addEventListener("change",shadow_yChanged,false); formElement=document.getElementById("shadowBlur"); formElement.addEventListener("change",shadowBlurChanged,false); formElement=document.getElementById("gradientColor"); formElement.addEventListener("change",gradientColorChanged,false); formElement=document.getElementById("fillType"); formElement.addEventListener("change",fillTypeChanged,false); formElement=document.getElementById("CanvasWidth"); formElement.addEventListener("change",CanvasWidthChanged,false); formElement=document.getElementById("CanvasHeight"); formElement.addEventListener("change",CanvasHeightChanged,false); formElement=document.getElementById("CanvasStyleWidth"); formElement.addEventListener("change",CanvasStyleSizeChanged,false); formElement=document.getElementById("CanvasStyleHeight"); formElement.addEventListener("change",CanvasStyleSizeChanged,false); formElement=document.getElementById("CreateImageData"); formElement.addEventListener("click",CreateImageDataChanged,false); } drawScreen(); // 畫圖函式 function drawScreen() { // 背景 context.fillStyle="#ffffaa"; context.fillRect(0,0,canvas.width,canvas.height); // 盒子 // context.strokeStyle="#000000"; // context.strokeRect(5,5,canvas.width-10,canvas.height-10); // 文字 // context.font="50px serif"; context.font=fontStyle+' '+fontWeight+' '+fontSize+'px'+' '+fontFace; var metrics=context.measureText(message); var textWidth=metrics.width; var xRealPosition=((parseInt(canvas.width)/2)-(parseInt(textWidth)/2)); var xPosition=(parseInt(canvas.width)/2); var yPosition=parseInt(canvas.height)/2; // 垂直對齊 context.textBaseline=textBaseline; // 水平對齊 context.textAlign=textAlign; // 透明 context.globalAlpha=textAlpha; // 文字陰影效果 context.shadowColor=shadowColor; context.shadowOffsetX=shadow_x; context.shadowOffsetY=shadow_y; context.shadowBlur=shadowBlur; // 漸變填充方式選擇 var tempColor; if(fillType=="colorFill"){ tempColor=fontColor; }else if(fillType=="linearGradient"){ var gradient=context.createLinearGradient(xRealPosition,yPosition,textWidth,yPosition); gradient.addColorStop(0,fontColor); gradient.addColorStop(.6,gradientColor); tempColor=gradient; }else if(fillType=="radialGradient"){ var gradient=context.createRadialGradient(xPosition,yPosition,fontSize,xPosition+textWidth,yPosition,1); gradient.addColorStop(0,fontColor); gradient.addColorStop(.6,gradientColor); tempColor=gradient; }else if(fillType=="pattern"){ tempColor=context.createPattern(pattern,"repeat"); }else{ tempColor=fontColor; } // fillOrStroke選擇 switch (fillOrStroke){ case "fill": context.fillStyle=tempColor; context.fillText(message,xPosition,yPosition); break; case "stroke": context.strokeStyle=tempColor; context.strokeText(message,xPosition,yPosition); break; case "both": context.fillStyle=tempColor; context.fillText(message,xPosition,yPosition); context.strokeStyle=tempColor; context.strokeText(message,xPosition,yPosition); break; } } // 輸入文字改變 function textBoxChanged(e){ var target= e.target; message=target.value; drawScreen(); } // 填充或描邊改變 function fillOrStrokeChanged(e){ var target= e.target; fillOrStroke=target.value; drawScreen(); } // 字型樣式改變 function fontStyleChanged(e){ var target= e.target; fontStyle=target.value; drawScreen(); } // 字型磅重改變 function fontWeightChanged(e){ var target= e.target; fontWeight=target.value; drawScreen(); } // 通用字型樣式改變 function fontFaceChanged(e){ var target= e.target; fontFace=target.value; drawScreen(); } // 字型大小改變 function fontSizeChanged(e){ var target= e.target; fontSize=target.value; drawScreen(); } // 字型顏色改變 function fontColorChanged(e){ var target= e.target; fontColor=target.value; drawScreen(); } // 垂直對齊改變 function textBaselineChanged(e){ var target= e.target; textBaseline=target.value; drawScreen(); } // 水平對齊改變 function textAlignChanged(e){ var target= e.target; textAlign=target.value; drawScreen(); } // 透明度改變 function textAlphaChanged(e){ var target= e.target; textAlpha=target.value; drawScreen(); } // 文字陰影 function shadowColorChanged(e){ var target= e.target; shadowColor=target.value; drawScreen(); } function shadow_xChanged(e){ var target= e.target; shadow_x=target.value; drawScreen(); } function shadow_yChanged(e){ var target= e.target; shadow_y=target.value; drawScreen(); } function shadowBlurChanged(e){ var target= e.target; shadowBlur=target.value; drawScreen(); } // 第二個漸變顏色改變 function gradientColorChanged(e){ var target= e.target; gradientColor=target.value; drawScreen(); } // 漸變填充樣式改變 function fillTypeChanged(e){ var target= e.target; fillType=target.value; drawScreen(); } // 畫布寬度改變 function CanvasWidthChanged(e){ var target= e.target; canvas.width=target.value; drawScreen(); } // 畫布高度改變 function CanvasHeightChanged(e){ var target= e.target; canvas.height=target.value; drawScreen(); } // 內聯樣式畫布寬度改變 function CanvasStyleSizeChanged(e){ var CanvasStyleWidth=document.getElementById("CanvasStyleWidth"); var CanvasStyleHeight=document.getElementById("CanvasStyleHeight"); canvas.setAttribute("width",CanvasStyleWidth.value); canvas.setAttribute("Height",CanvasStyleHeight.value); drawScreen(); } // toDataURL()獲取圖形資料 function CreateImageDataChanged(e){ var imageDataDisplay=document.getElementById("imageDataDisplay"); imageDataDisplay.value=canvas.toDataURL(); } } </script> </body> </html>