H5+Canvas的使用示例

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

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

獲取canvas對(duì)象上下文

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

canvas是基于狀態(tài)的繪圖環(huán)境

畫直線

context.moveTo(x,y); 挪到筆頭  
context.lineTo(x,y);按著畫筆移動(dòng) （可以結(jié)合使用moveTo畫不相連的線段）moveTo lineTo +moveTo lineTo
context.lineWith=10;    canvas是基于狀態(tài)的，它不會(huì)創(chuàng)建一個(gè)直線對(duì)象。我們是對(duì)canvas上下文進(jìn)行其他設(shè)置。讀完所以設(shè)置后再繪圖
context.strokeStyle='red';   這里還有其他的樣式，不僅僅只有顏色。
context.stroke();
context.beginPath();  開(kāi)始一個(gè)全新的canvas狀態(tài)。之前對(duì)context的設(shè)置不會(huì)因?yàn)閎eginPath()而改變。新的設(shè)置會(huì)覆蓋之前的設(shè)置
context.closePath();  使用線段繪制封閉的圖形?？梢匀サ糇詈笠粋€(gè)lineTo。closePath()會(huì)完成封閉這個(gè)動(dòng)作。
context.fillStyle='green';
context.fill();  建議在進(jìn)行完所有的設(shè)置之后再fill和stroke。不然fill會(huì)覆蓋一部分的線段寬度，會(huì)由10變成5;

可以通過(guò)以上方法進(jìn)行封裝各種圖形的函數(shù)。當(dāng)然canvas也提供了很多圖形api

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

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

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

線條屬性：

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

圖形變換

context.translate(x,y);移動(dòng)坐標(biāo)系
context.rotate(deg);旋轉(zhuǎn)坐標(biāo)系弧度制
context.scale(x,y);縮放坐標(biāo)系--->需要注意的是，它也會(huì)對(duì)坐標(biāo)數(shù)值，邊框?qū)挾葘傩缘冗M(jìn)行縮放，使用時(shí)需要謹(jǐn)慎選擇。

提示：在進(jìn)行一次變換之后，坐標(biāo)系已經(jīng)發(fā)生變化，如果在使用變換，就會(huì)與之前預(yù)期不同。那么我們就需要將之前的變換再逆向執(zhí)行一次，如context.translate(100,200)之后，如果還需要進(jìn)行rotate變換，就需要再進(jìn)行一次context.translate(-100,-200)操作。這樣操作就會(huì)很麻煩，canvas提供了一個(gè)簡(jiǎn)單的方法來(lái)保存變換之前的canvas狀態(tài)。如下

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

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

變換矩陣---canvas為變換提供了一個(gè)更高級(jí)的方法。

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

注：以上說(shuō)明了fillStyle的值：color、gradient、img、canvas、video。當(dāng)然，以上的style值也是適用strokeStyle。

繪制一段弧---arc

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

這些參數(shù)分別代表是中心坐標(biāo)，半徑，開(kāi)始結(jié)束弧度，及是否逆時(shí)針（默認(rèn)false）

可以封裝一些方法來(lái)畫圓形，圓線，圓角矩形等。

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

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

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

插入一段：

我們?cè)谑褂胏anvas封裝一些畫圖形的函數(shù)時(shí)，一般步驟為先使用ctx.save()和ctx.restore()包裹函數(shù)的開(kāi)始和結(jié)束。在其中做一些style的設(shè)置、變換的設(shè)置、及一個(gè)繪制圖形路徑的函數(shù)。在這個(gè)路徑函數(shù)中以ctx.beginPath()和ctx.closePath()開(kāi)始和結(jié)束，在其中使用一些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）為起點(diǎn)，（x2,y2）為終點(diǎn)的一段弧。  那么這樣的一段弧，不一定是一段圓弧。

三次貝塞爾曲線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）為起點(diǎn)，（x3,y3）為終點(diǎn)的一段弧。 這么一段弧度可以繪制二次曲線不能完成的波浪弧線。

canvas中文字的繪制

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

string 這個(gè)字符串如果設(shè)置了maxlen這個(gè)可選參數(shù)，那么這段文字就會(huì)強(qiáng)制壓縮在maxlen這個(gè)寬度中。

當(dāng)然，我們也可以設(shè)置fillStyle為一段紋理背景，在繪制文字，那么就會(huì)一段帶紋理背景的文字。

文字細(xì)節(jié)部分

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

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

ctx.textBaseLine=top、middle、bottom;

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

另外還有alphabetic（默認(rèn)，英文等）、ideographic（漢字，日語(yǔ)）、hanging（印度）三種值分別對(duì)應(yīng)三類語(yǔ)言設(shè)置基準(zhǔn)線

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

暫時(shí)不支持其他的屬性如height等

陰影

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

只需要設(shè)置shadowColor 和下面的任何一個(gè)屬性，陰影就會(huì)出現(xiàn)，一般需要全部設(shè)置。

canvas繪制 均可設(shè)置shadow陰影

global屬性  對(duì)全局設(shè)置

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

11種樣式如下:

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

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

剪輯區(qū)域clip-----》使用剛剛規(guī)劃的路徑  為剪輯區(qū)域，那么我們看到，也只是這個(gè)剪輯區(qū)域的圖形

ctx.beginPath();

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

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

<!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，請(qǐng)更新瀏覽器！')
		}
	}
	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不能直接傳入帶參數(shù)的方法調(diào)用。 一般有2中方法，1、使用匿名方法包裝下。
		var interval=setInterval(function(){
			go(context);
		},90);	
	}
	/*function run(context){	//2、定義一個(gè)帶參數(shù),返回一個(gè)無(wú)參方法，在返回的無(wú)參方法中調(diào)用之前帶參方法。
		return function(){
			go(context);
		}
	}*/
	function go(context){
		updateCirCles(CIRCLES);
		paintCircles(context,CIRCLES);
	}
	/*繪制一個(gè)圓對(duì)象*/
	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();
		}
	}
	/*隨機(jī)生成新的圓對(duì)象，加入到數(shù)組*/
	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;
			}
		}
	}
	//隨機(jī)生成rgb顏色值"#123abc"
	function createRandomRGBColor(){
		var color="";
		for(var i=0 ; i<6 ; i++){
			color+=COLORS[Math.floor(Math.random()*COLORS.length)];
		}
		return "#"+color;
	}
	//隨機(jī)生成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>

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