思想和行動,總要有一個不能落後於人。

現在基本的輸入工程,互動功能已經實現,到了最重要的一個功能,就是把文字和圖片實現一個重合。

具體怎麼實現我上網查了一下,發現了通過<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)

使用影象:

The Scream

例項

把一幅影象放置到畫布上:

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這幾個功能。