關於H5的Canvas

 

 

一、什麼是canvas？

<canvas>標籤是h5新增的，經過腳本（一般是js）來繪製圖形，canvas只是一個圖形容器，或者說是畫布。

canvas能夠繪製路徑、圖形、字以及添加圖像。

二、建立一個畫布

<canvas  id="can"  width="200" height="100"></canvas>

canvas中須要指定一個id屬性供腳本引用，width和height定義畫布的大小。另外能夠用style來添加畫布邊框。

<style type="text/css">
canvas {
　　border: #ccc solid 1px;
}
</style>

三、使用js繪製圖像

canvas自己沒有繪圖能力，全部的繪圖工做必須在js內部完成：

首先找到canvas元素：

var  can=document.getElementById("can");

其次建立context對象（getContext("2d")對象是內建的H5對象，擁有多種繪製圖形方法）：

var  ctx=can.getContext("2d");

設置填充圖形的顏色：

ctx.fillStyle="#FF0000";    // fillStyle能夠是css顏色，漸變，或圖案，默認設置是黑色（#000000）

定義矩形：

ctx.fillRect(0,0,150,70);    //  fillRect(x,y,width,height)定義了矩形及其長寬

四、Canvas座標

canvas是一個二維網格。cancas的左上角座標爲（0，0），上面的fillRect方法的參數（0，0，150，70）意思就是從左上角（0，0）開始在畫布上繪製一個150*70的矩形。

五、Canvas路徑

畫線：

beginPath();新建一條路徑

moveTo(x,y);定義線條開始座標

lineTo(x,y)；定義線條結束座標

closePath();閉合路徑後，圖形繪製又從新回到上下文中

stroke();經過線條來繪製圖形輪廓

fill();經過填充路徑的內容區域生成實心的圖形

實例：

var  can=document.getElementById("can");

var  ctx=can.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

畫圓：

一、arc（x1,y1,x2,y2,radius）；

根據給定的控制點和半徑畫圓弧

ctx.arc(95,50,40,0,2*Math.PI);

二、arc(x,y,r,startAngle,endAngle,anticlockwise);

以（x,y）爲圓心，r爲半徑，從startAngle弧度開始到endAngle弧度結束。anticlockwise爲true表示逆時針，false爲順時針

0弧度指x軸正方向  ，角度轉換成弧度：（Math.PI/180)*degrees

ctx.arc(50,50,40,0,Math.PI/2,false);

arcTo方法的說明：

​ 這個方法能夠這樣理解。繪製的弧形是由兩條切線所決定。

​ 第 1 條切線：起始點和控制點1決定的直線。

​ 第 2 條切線：控制點1 和控制點2決定的直線。

​ 其實繪製的圓弧就是與這兩條直線相切的圓弧。

 貝塞爾曲線請自行上網搜索。

6.canvas文本

font定義字體

fillText（text,x,y）繪製實心文本

strokeText(text,x,y) 繪製空心文本

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

 

七、canvas漸變

createLinearGradient(x,y,x1,y1)建立線條漸變

createRadialGradient(x,y,r,x1,y1,r1)建立一個徑向/圓漸變

addColorStop()指定顏色中止，參數使用座標描述，能夠是0至1

線性：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// 建立漸變

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// 填充漸變

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

 徑向：

// 建立漸變

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// 填充漸變

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

 八、canvas圖像

drawImage(image,x,y);

 var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("scream");

或者 var img=new Image();

img.src="flower.png";

 

ctx.drawImage(img,10,10);

 九、添加樣式和顏色

fillStyle =color  設置圖形填充顏色

strokeStyle=color 設置圖形輪廓顏色

 十、變形

translate（x，y）用來移動canvas的原點到指定的位置

rotate（angle）旋轉座標軸（angle爲順時針方向，弧度爲單位，旋轉中心爲座標原點）

十一、同一個畫布如何只改變其中一條線的顏色：（先保存線條在塗色，而後restore到上一狀態）

function arrow2(canId, ox, oy, x1, y1, x2, y2,color) {
//參數說明 canvas的 id ，原點座標 第一個端點的座標，第二個端點的座標 
var sta = new Array(x1, y1);
var end = new Array(x2, y2);

var canvas = document.getElementById(canId);
if(canvas == null) return false;
var ctx = canvas.getContext('2d');

//畫線 
ctx.beginPath();
ctx.translate(ox, oy); //座標源點 
ctx.moveTo(sta[0], sta[1]);
ctx.lineTo(end[0], end[1]);
ctx.save();
ctx.strokeStyle=color;//線條顏色
ctx.fillStyle = color;//箭頭顏色
ctx.fill();
ctx.stroke();

//畫箭頭 
ctx.translate(end[0], end[1]);
//個人箭頭本垂直向下，算出直線偏離Y的角，而後旋轉 ,rotate是順時針旋轉的，因此加個負號 
var ang = (end[0] - sta[0]) / (end[1] - sta[1]);
ang = Math.atan(ang);
if(end[1] - sta[1] >= 0) {
ctx.rotate(-ang);
} else {
ctx.rotate(Math.PI - ang); //加個180度，反過來 
}
ctx.lineTo(-5, -10);
ctx.lineTo(0, -5);
ctx.lineTo(5, -10);
ctx.lineTo(0, 0);
ctx.fill(); //箭頭是個封閉圖形 
ctx.restore(); //恢復到堆的上一個狀態
ctx.closePath();
}

 畫布若是與div或其餘塊標籤衝突，可讓畫布背景變透明加style以下：

<canvas id="Canvas1" width="140" height="400" style="background: rgba(255,255,155,0); position: absolute;left: 130px; z-index: -1">你的瀏覽器不支持canvas,請升級你的瀏覽器</canvas>

 z-index表明疊加順序。