【Canvas】畫布,畫圓、背景以及生成圖片
阿新 • • 發佈:2019-01-31
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