1、插入文字

//設定使用者文字填充顏色
context.fillStyle = '#999';
//設定使用者文字的大小字型等屬性
context.font = "small-caps bold 25px Arial";
//繪製文字
context.fillText("時間飛逝",230,250,200);

2、插入圖片

context.drawImage('imgurl',10,300,530,500);

3、插入圓形的圖片

context.beginPath();
//畫裁剪區域，此處以圓為例
context.translate(5,50);
context.arc(50,50,50,0,2*Math.PI);
context.clip();//次方法下面的部分為待剪下區域，上面的部分為剪下區域
context.drawImage('imgurl',0,0,100,100);
 

4、插入有背景顏色的文字

先插入背景顏色，然後再插入文字

context.fillStyle = '#f5850d';//設定使用者文字的大小字型等屬性
context.font = "small-caps bold 35px Arial";//設定使用者文字填充顏色
context.fillText("時間飛逝",140,1030,200);

context.fillStyle = '#fff';//設定使用者文字的大小字型等屬性
context.font = "small-caps bold 33px Arial";//設定使用者文字填充顏色
context.fillText("時間飛逝",120,1090,200);

5、canvas轉換成base64格式的資料

canvas.toDataURL('image/jpeg',0.8); //轉換圖片為dataURL

6、base64格式轉換成圖片顯示

'data:image/jpg;base64,'+imgurl