繪製文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <bo ...
繪製文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 var str="hello cyy"; //文字大小 ctx.font="50px sans-serif"; //字元str //位置100,100 ctx.fillText(str,100,100); ctx.strokeText(str,100,200); </script> </body> </html>
水平對齊方式：left center right
文字居中，textAlign="center"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 var str="hello cyy"; //文字大小 ctx.font="50px sans-serif"; //文字水平居中 ctx.textAlign="center"; //字元str 位置100,100 ctx.fillText(str,100,100); ctx.strokeText(str,100,200); </script> </body> </html>
需要註意的是，設置的並不是到畫布的水平居中，而是以接下來你自己設置的fillText或者strokeText中的坐標作為文字的中心
如果想要設置到畫布的居中，就需要對應的坐標點設為畫布中心點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 var str="hello cyy"; //文字大小 ctx.font="50px sans-serif"; //文字水平居中 ctx.textAlign="center"; //字元str 在畫布位置水平居中 ctx.fillText(str,300,200); </script> </body> </html>
垂直對齊方式 top middle bottom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 var str="hello cyy"; //文字大小 ctx.font="50px sans-serif"; //文字水平居中，以300位為水平中心 ctx.textAlign="center"; //文字垂直居中 ，以0為垂直中心 ctx.textBaseline="middle"; //字元str ctx.fillText(str,300,0); </script> </body> </html>
如果需要文字全部顯示，就設置垂直為top
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 var str="hello cyy"; //文字大小 ctx.font="50px sans-serif"; //文字水平居中，以300位為水平中心 ctx.textAlign="center"; //文字垂直居中 ，以0為垂直頂對齊 ctx.textBaseline="top"; //字元str ctx.fillText(str,300,0); </script> </body> </html>
獲取文本寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 var str="hello cyy"; //文字大小 ctx.font="50px sans-serif"; //文字水平居中，以300位為水平中心 ctx.textAlign="center"; //文字垂直居中 ，以0為垂直頂對齊 ctx.textBaseline="top"; //字元str ctx.fillText(str,300,0); //獲取文本寬度 var width=ctx.measureText(str).width; console.log(width); </script> </body> </html>
遺憾的是，canvas並沒有提供獲取高度的介面，因此需要通過文字大小或者自己去調試來獲得
圖片的繪製
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 //載入圖片 var img=new Image(); img.src="img/right.png"; //繪製圖片 ctx.drawImage(img,0,0); </script> </body> </html>
打開以後發現並沒有圖片，這是因為圖片的載入需要一定時間
因此繪製必須要在圖片載入完成之後才能進行
使用onload函數來判定是否載入完成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 //載入圖片 var img=new Image(); img.src="img/right.png"; //圖片載入完成後 img.onload=function(){ //繪製圖片 ctx.drawImage(img,0,0); } </script> </body> </html>
給自己做一個頭像，我又臭美了哈哈哈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="600">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//上下文，繪圖環境 //載入圖片 var img=new Image(); img.src="img/cyy_small.png"; //圖片載入完成後 img.onload=function(){ //繪製圖片 ctx.drawImage(img,100,50); } </script> </body> </html>
設置圖像尺寸
ctx.drawImage(img,100,50,width,height);
後面新增兩個參數填寫圖片的寬高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="600">您的瀏覽器不支持canvas</
