繪制文字
<!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</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(){ //繪制圖片 //原圖400,*600，縮放為200*300 ctx.drawImage(img,100,50,200,300); } </script> </body> </html>
圖片的裁剪，需要
ctx.drawImage(img，要裁剪的起始點坐標，要裁剪的寬高尺寸，繪制區域的起始點坐標，繪制區域的寬高尺寸);
<!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(){ //繪制圖片 //裁剪出原圖的0,0到400,400位置 //繪制到0,0到400,400位置 //等於是不進行縮放的效果 ctx.drawImage(img,0,0,400,300,0,0,400,300); } </script> </body> </html>
裁剪+縮放0.5倍+移動100,100的效果
<!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(){
//繪制圖片
//從原圖的0,0開始裁剪，寬高400,300
//從100,100開始繪制，寬高為200,150
ctx.drawImage(img,0,0,400,300,100,100,200,150);
} </script> </body> </html>
圖形畫刷
首先是star.jpg長這樣
<!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/star.jpg"; //圖片加載完成后 img.onload=function(){ //創建圖形畫刷，模式為repeat var pattern=ctx.createPattern(img,"repeat"); ctx.fillStyle=pattern; //繪制矩形，使用畫刷填充 ctx.fillRect(0,0,canvas.width,canvas.height); } </script> </body> </html>
模式總共有四種：no-repeat repeat-x repeat-y repeat
no-repeat的效果
<!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/star.jpg"; //圖片加載完成后 img.onload=function(){ //創建圖形畫刷，模式為repeat var pattern=ctx.createPattern(img,"no-repeat"); ctx.fillStyle=pattern; //繪制矩形，使用畫刷填充 ctx.fillRect(0,0,canvas.width,canvas.height); } </script> </body> </html>
其他兩個同理