H5+Canvas的使用示例

小編給大家分享一下H5+Canvas的使用示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

<canvas id='canvas'></canvas>

獲取canvas對象上下文

var convas=document.getElementById('canvas');
var context=canvas.getContext('2d');

canvas是基于狀態的繪圖環境

畫直線

context.moveTo(x,y); 挪到筆頭  
context.lineTo(x,y);按著畫筆移動 （可以結合使用moveTo畫不相連的線段）moveTo lineTo +moveTo lineTo
context.lineWith=10;    canvas是基于狀態的，它不會創建一個直線對象。我們是對canvas上下文進行其他設置。讀完所以設置后再繪圖
context.strokeStyle='red';   這里還有其他的樣式，不僅僅只有顏色。
context.stroke();
context.beginPath();  開始一個全新的canvas狀態。之前對context的設置不會因為beginPath()而改變。新的設置會覆蓋之前的設置
context.closePath();  使用線段繪制封閉的圖形。可以去掉最后一個lineTo。closePath()會完成封閉這個動作。
context.fillStyle='green';
context.fill();  建議在進行完所有的設置之后再fill和stroke。不然fill會覆蓋一部分的線段寬度，會由10變成5;

可以通過以上方法進行封裝各種圖形的函數。當然canvas也提供了很多圖形api

context.rect(x,y,width,height);繪制矩形的路徑
context.fillRect(x,y,width,height);使用當前fillStyle繪制矩形 ( 顏色值可以使用css認同的所有顏色值包括rgb、rgba、hsl、hsla)
context.strokeRect(x,y,width,height);使用當前的strokeStyle繪制矩形

后面繪制的圖形如果與之前的圖形有重疊，則后者會覆蓋前者。

但是如果fillStyle 或者strokeStyle的顏色值有一定的透明度，則被覆蓋的部分還是有一部分顯示的。當然也有其他對重疊部分的設置

線條屬性：

lineWidth=10;
lineCap=''; 線段的2段的樣式。butt(default)、round圓頭、square方頭。round和squqre比默認的長線條寬度的一半（5）的的長度。
lineJoin;線段與線段之間連接的樣式。miter(default)、bevel(斜截)、round(圓頭)

圖形變換

context.translate(x,y);移動坐標系
context.rotate(deg);旋轉坐標系弧度制
context.scale(x,y);縮放坐標系--->需要注意的是，它也會對坐標數值，邊框寬度屬性等進行縮放，使用時需要謹慎選擇。

提示：在進行一次變換之后，坐標系已經發生變化，如果在使用變換，就會與之前預期不同。那么我們就需要將之前的變換再逆向執行一次，如context.translate(100,200)之后，如果還需要進行rotate變換，就需要再進行一次context.translate(-100,-200)操作。這樣操作就會很麻煩，canvas提供了一個簡單的方法來保存變換之前的canvas狀態。如下

context.save();
context.translate(x,y);
context.restore();

在變換之前進行save操作，變換完成之后再restore操作，就可以還原到之前的canvas狀態，避免第一的變換影響到第二次的變換。

變換矩陣---canvas為變換提供了一個更高級的方法。

contex.transform(a,b,c,d,e,f);   a、d-水平垂直縮放；b、c水平垂直傾斜；e、f水平垂直位移。
context.transform(1,0,0,1,0,0);基本矩陣，圖形不發生任何變化。
當我們進行多次transform矩陣之后，標準系以及很混亂了，就需要下面這個方法了。
context.setTransform(a,b,e,d,e,f)。覆蓋之前的transform設置，使用當前的transform設置，這樣我們就很清楚當前具體transform變換。
context.fillStyle   ---填充樣式  之  漸變
linearGradient:
var grd=context.creatLinearGradient(xStart,yStrart,xEnd,yEnd);   定義漸變色。在（xEnd,yEnd）點之后，填充的是最后的顏色值。
grd.addColorStop(stop,color);(stop的值，0-1的浮點數)   一般多個顏色斷點配合使用，從而實現多顏色的漸變
context.fillStyle=grd;
context.fill();
radialGradient;
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1); 定義2個同心圓，（x0,y0）位置的半徑r0
gra.addColorStop(stop,color);
context.fillStyle=grd;
context.fill();
createPattern
var pattern=context.createPattern(img || canvas || video , repeat-style);
Img的值可以使一張圖片，也可以使一個canvas畫布，甚至是一段video
repeat-style的值：no-repeat、repeat-x、repeat-y、repeat
context.fillStyle=pattern;
context.fill();

注：以上說明了fillStyle的值：color、gradient、img、canvas、video。當然，以上的style值也是適用strokeStyle。

繪制一段弧---arc

context.arc(centerX , centerY , radius , startAngle , endAngle , anticlockwise=false)，

這些參數分別代表是中心坐標，半徑，開始結束弧度，及是否逆時針（默認false）

可以封裝一些方法來畫圓形，圓線，圓角矩形等。

contex.arcTo(x1 , y1 ,  x2 , y2 , radius);

當前點（x0,y0）與(x1,y1)和（x2，y2）這三點組合成一個角，分別切于2邊的弧就是arcTo繪制的效果。起點是當前點，結束點（x2,y2）,當然這是一段直線+圓弧的效果，radius為圓弧的半徑。如下圖所示。

適用情景：一般畫圓弧是需要圓心坐標的。使用arcTo我們可以在不清楚圓心坐標的情況下繪制一段弧。

插入一段：

我們在使用canvas封裝一些畫圖形的函數時，一般步驟為先使用ctx.save()和ctx.restore()包裹函數的開始和結束。在其中做一些style的設置、變換的設置、及一個繪制圖形路徑的函數。在這個路徑函數中以ctx.beginPath()和ctx.closePath()開始和結束，在其中使用一些moveTo，lineTo，arc，arcTo等方法。

二次貝塞爾曲線quadraticCurveTo(x1，y1，x2，y2);------http://tinyurl.com/html5quadratic

ctx.moveTo(x0,y0);
ctx.quadraticCurveTo(x1，y1，x2，y2);

這樣就繪制一段以（x0,y0）為起點，（x2,y2）為終點的一段弧。  那么這樣的一段弧，不一定是一段圓弧。

三次貝塞爾曲線bezierCurveTo(x1，y1，x2，y2，x3，y3)-----http://tinyurl.com/html5bezier

ctx.moveTo(x0,y0);
ctx.bezierCurveTo(x1，y1，x2，y2，x3，y3)

這樣就繪制一段以（x0,y0）為起點，（x3,y3）為終點的一段弧。 這么一段弧度可以繪制二次曲線不能完成的波浪弧線。

canvas中文字的繪制

ctx.font = "bold 40px Arial";
ctx.fillStyle=;
ctx.fillText(string ，x ，y，[maxlen]);在（x,y）位置繪制string 這個字符串
ctx.strokeStyle=;
ctx.strokeText(string，x，y，[maxlen]);在（x，y）位置繪制string 這個字符串，這個文字只有文字的邊框，并沒有填充

string 這個字符串如果設置了maxlen這個可選參數，那么這段文字就會強制壓縮在maxlen這個寬度中。

當然，我們也可以設置fillStyle為一段紋理背景，在繪制文字，那么就會一段帶紋理背景的文字。

文字細節部分

ctx.font="20px sans-serif"(默認)，如果需要設置，只是這2個值
font：font-style、font-varient、font-weight、font-size、font-family（一個5個屬性，和css基本相似）
font-style:normal、italic(斜體)、oblique（傾斜字體）。一般的web頁面中italic和oblique是一樣的，除非使用自己導入的傾斜字體。
font-varient：normal、small-caps(使用小型大寫字母 替代 小寫字母，大小和小寫一樣，只是他是大寫的)
font-weight：lighter、normal、bold、bolder。一般瀏覽器，前2者一樣，后2者一樣。
font-size：px、em、%、large等
font-family：支持設置多種字體備用、支持@font-face、支持web安全字體
ctx.textAlign=left、center、right。

分別是以fillText(string，x，y);中x坐標為左邊界、中間線、右邊界繪制文字。（注意：left、right分別是指的邊界）

ctx.textBaseLine=top、middle、bottom;

分別是以fillText(string，x，y);中x坐標為上邊界、中間線、下邊界繪制文字。同樣也是邊界。

另外還有alphabetic（默認，英文等）、ideographic（漢字，日語）、hanging（印度）三種值分別對應三類語言設置基準線

ctx.measureText(string).width-------根據對font設置之后，返回一個一段文字渲染的寬度

暫時不支持其他的屬性如height等

陰影

ctx.shadowColor     --->CSS接受的顏色值均可
ctx.shadowOffsetX   --->x、y方向上的偏移    可為負值
ctx.shadowOffsetY
ctx.shadowBlur   --->模糊  0--> 越大越模糊

只需要設置shadowColor 和下面的任何一個屬性，陰影就會出現，一般需要全部設置。

canvas繪制 均可設置shadow陰影

global屬性  對全局設置

ctx.globalAlpha=1(default)   對全局設置透明度
ctx.globalCompositeOperation=   前后繪制圖形重疊部分的樣式     共有11種樣式
"source-over"(default)  : 后繪制的圖形覆蓋前繪制的圖形（默認）
"destination-over":前繪制的圖形覆蓋后繪制的圖形

11種樣式如下:

source-oversource-atopsource-insource-out
destination-over destination-atopdestination-indestination-out

lighter(顏色計算)copy（只保留后者）xor(清除重疊部分)

剪輯區域clip-----》使用剛剛規劃的路徑  為剪輯區域，那么我們看到，也只是這個剪輯區域的圖形

ctx.beginPath();

ctx.arc(400,400,200,0,Math.PI*2);

ctx.clip();    --->有繪制了一個圓形的剪輯區域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas之globalCompositeOperation</title>
	<style type="text/css">
	body{
		background-color: #ccc;
	}
	</style>
</head>
<body>
	<canvas id="canvas" style="display: block;margin: 50px auto;border:1px solid #ccc; background-color: #FFF"></canvas>
</body>
<script type="text/javascript">
	var canvas=document.getElementById('canvas');
	var WIDTH=1500;
	var HEIGHT=800;
	canvas.width=WIDTH;
	canvas.height=HEIGHT;
	var CIRCLES=[];
	var COLORS=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
	var NUMS=220;
	var SPEEDX=16;
	var SPEEDY=8;
	var RADIUS=25;
	window.onload=function(){
		if(canvas){
			var context=canvas.getContext('2d');
			gloablCompositeOperation(context);
		}else{
			console.log('瀏覽器不支持canvas，請更新瀏覽器！')
		}
	}
	function gloablCompositeOperation(context){
		context.clearRect(0, 0, WIDTH, HEIGHT);
		context.globalCompositeOperation="xor";
		context.globalAlpha=1;
		addCircles(CIRCLES,NUMS);
		paintCircles(context,CIRCLES);
		//setInterval(run(context),90);	  //setInterval、setTimeout不能直接傳入帶參數的方法調用。 一般有2中方法，1、使用匿名方法包裝下。
		var interval=setInterval(function(){
			go(context);
		},90);	
	}
	/*function run(context){	//2、定義一個帶參數,返回一個無參方法，在返回的無參方法中調用之前帶參方法。
		return function(){
			go(context);
		}
	}*/
	function go(context){
		updateCirCles(CIRCLES);
		paintCircles(context,CIRCLES);
	}
	/*繪制一個圓對象*/
	function paintCircles(ctx ,CIRCLES){
		ctx.clearRect(0, 0, WIDTH, HEIGHT);
		for(var i=0 ; i<CIRCLES.length ; i++){
			ctx.beginPath();
			ctx.arc(CIRCLES[i].x,CIRCLES[i].y,CIRCLES[i].r,0,Math.PI*2);
			ctx.closePath();
			ctx.fillStyle=CIRCLES[i].color;
			ctx.fill();
		}
	}
	/*隨機生成新的圓對象，加入到數組*/
	function addCircles(CIRCLES,num){		
		for(var i=0 ; i<num ;i++){
			var circle={};
			var radius=(1+Math.random())*RADIUS;
			var	cX=Math.random()*WIDTH;
			var	cY=Math.random()*HEIGHT;
			cX=cX<radius?radius:cX;
			cY=cY<radius?radius:cY;
			cX=cX>(WIDTH-radius)?(WIDTH-radius):cX;
			cY=cY>(HEIGHT-radius)?(HEIGHT-radius):cY;
			circle.x=cX;
			circle.y=cY;
			circle.r=radius;
			circle.color=createRandomRGBColor(); 
			circle.vX=(Math.floor(Math.random()*10)%2)==0?SPEEDX:(-1)*SPEEDX;
			circle.vY=(Math.floor(Math.random()*10)%2)==0?SPEEDY:(-1)*SPEEDY;
			circle.vX=circle.vX+Math.random()*6;
			circle.vY=circle.vY+Math.random()*3;
			CIRCLES[i]=circle;
		}
	}
	function updateCirCles(CIRCLES){
		for(var i=0 ; i<CIRCLES.length ; i++){
			var width=WIDTH-CIRCLES[i].r;
			var height=HEIGHT-CIRCLES[i].r;
			
			if(CIRCLES[i].x + CIRCLES[i].vX>width){
				CIRCLES[i].x=CIRCLES[i].x;
				CIRCLES[i].vX=CIRCLES[i].vX*(-1); 
			}else	if(CIRCLES[i].y + CIRCLES[i].vY>height){
				CIRCLES[i].y=CIRCLES[i].y; 
				CIRCLES[i].vY=CIRCLES[i].vY*(-1); 
			}else	if(CIRCLES[i].x + CIRCLES[i].vX<CIRCLES[i].r){
				CIRCLES[i].x=CIRCLES[i].x;
				CIRCLES[i].vX=CIRCLES[i].vX*(-1); 
			}else	if(CIRCLES[i].y + CIRCLES[i].vY<CIRCLES[i].r){
				CIRCLES[i].y=CIRCLES[i].y;
				CIRCLES[i].vY=CIRCLES[i].vY*(-1); 
			}else{
				CIRCLES[i].x=CIRCLES[i].x + CIRCLES[i].vX;
				CIRCLES[i].y=CIRCLES[i].y + CIRCLES[i].vY;
			}
		}
	}
	//隨機生成rgb顏色值"#123abc"
	function createRandomRGBColor(){
		var color="";
		for(var i=0 ; i<6 ; i++){
			color+=COLORS[Math.floor(Math.random()*COLORS.length)];
		}
		return "#"+color;
	}
	//隨機生成rgba顏色值"#123abc"
	function createRandomRGBAColor(){
		var color="";
		for(var i=0 ; i<3 ; i++){
			color+=Math.floor(Math.random()*255)+",";
		}
		return "rgba("+color+Math.random()+")";  //"rgba("+color+Math.random()+")"
	}
</script>
</html>

看完了這篇文章，相信你對“H5+Canvas的使用示例”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！