利用在圖片上中新增文字最終生成海報的程式碼實現
思想和行動，總要有一個不能落後於人。
現在基本的輸入工程，互動功能已經實現，到了最重要的一個功能，就是把文字和圖片實現一個重合。
具體怎麼實現我上網查了一下，發現了通過<canvas>標籤利用js可以實現這個功能。
什麼是 Canvas?
HTML5 <canvas> 元素用於圖形的繪製，通過指令碼 (通常是JavaScript)來完成.
<canvas> 標籤只是圖形容器，您必須使用指令碼來繪製圖形。
你可以通過多種方法使用Canva繪製路徑,盒、圓、字元以及新增影象。
建立一個畫布（Canvas）
一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪製.
注意: 預設情況下 <canvas> 元素沒有邊框和內容。
<canvas>簡單例項如下:
<canvas id="myCanvas" width="200" height="100"></canvas>注意: 標籤通常需要指定一個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小.
提示:你可以在HTML頁面中使用多個 <canvas> 元素.
使用 style 屬性來新增邊框:使用 JavaScript 來繪製圖像
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：
例項
<script>var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
例項解析:
首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");然後，建立 context 物件：
var ctx=c.getContext("2d");getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。
下面的兩行程式碼繪製一個紅色的矩形：
ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);
設定fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 預設設定是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
關於fileRect中的引數，實際上width是寬，height是高，而x,y是距離原點的相對位置，例如
當設定為（0,0,150,75）的時候
如果設定為20,5,75,150的時候
Canvas - 路徑
在Canvas上畫線，我們將使用以下兩種方法：
- moveTo(x,y) 定義線條開始座標 // 起點位置，這個位置是相對於畫布的canvas的原點
- lineTo(x,y) 定義線條結束座標 // 終點位置，同樣也是相對於畫布的
繪製線條我們必須使用到 "ink" 的方法，就像stroke().
例項
定義開始座標(0,0), 和結束座標 (200,100). 然後使用 stroke() 方法來繪製線條:
JavaScript:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//其中前面這兩句，更像是canva的標配
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
嘗試一下 »
在canvas中繪製圓形, 我們將使用以下方法:
- arc(x,y,r,start,stop)
實際上我們在繪製圓形時使用了 "ink" 的方法, 比如 stroke() 或者 fill().
例項
使用 arc() 方法 繪製一個圓:
JavaScript:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
嘗試一下 »
Canvas - 文字
使用 canvas 繪製文字，重要的屬性和方法如下：
- font - 定義字型
- fillText(text,x,y) - 在 canvas 上繪製實心的文字
- strokeText(text,x,y) - 在 canvas 上繪製空心的文字
使用 fillText():
例項
使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（實心）：
JavaScript:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
嘗試一下 »
使用 strokeText():
例項
使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（空心）：
JavaScript:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
嘗試一下 »
Canvas - 影象
把一幅影象放置到畫布上, 使用以下方法:
- drawImage(image,x,y)
使用影象:
例項
把一幅影象放置到畫布上:
JavaScript:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
嘗試一下 »
所以最後我用js功能實現了這個程式碼 當時我的具體程式碼是這樣的
<body>
<canvas id="cv" width="400" height="400"></canvas>
<script type="text/javascript">
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
var zi = "新增的1232454566"
var img = document.createElement('img');
img.onload = function(){
ctx.drawImage(img, 0, 0, 400, 400);
ctx.font = 'bold 50px Arial';
ctx.fillStyle = 'black';
if (zi.length > 5) {
ctx.fillText(zi, 20, 280);
}else{
ctx.fillText(zi, 10, 180);
}
}
img.src = '/1.png';
</script>>
</body>
簡單解釋一下就是
首先建立一個畫布 canvas，可以設定他的高低，位置的的話應該可以通過style進行設定，然後就可以js來對canvas進行新圖片的生成了。
var cv =document.getElementById('cv')這句話是得到ID為cv的元素，也就是找到canvas 這個元素。
var ctx = cv.getContext('2d'); ————按照上面的解釋就是在2維影象中的一個固定用法，內建物件。可以實現多種方法。也許西面的drawImage就是其中的方法。
var zi = ”新增的123456789“；設定待新增的文字。
var image = document.creatElement('img'); 建立一個img標籤元素
img.onload = function(){
ctx.drawImage(img,0,0,400,400); \\——————drawImage一共傳入了五個引數，其中img是待合成的圖片，0,0是待合成的image相對canvas的位置，400,400是新圖片寬和高，
ctx.font = 'bold 50px Arial';----可以設定新增文字的字型
ctx.fillStyle ="black"; // 可以設定新增文字的顏色
if (zi.length >5){
ctx.fillText(zi,20,280); //新增文字 設定他們的位置
}else{
ctx.fillText(zi,10,180);
}
img.src = '/1.png'; //新增img的地址
}
這裡是簡單的將圖片繪製到畫布的過程中，主要運用了canvas，getContext(2d)，drawImage這幾個功能。