H5+Canvas の使用例の詳細な説明-H5 チュートリアル-php.cn

今回は、H5+Canvasの使用例について詳しく説明します。H5+Canvasを使用する際の注意点は何ですか?実際の事例を見てみましょう。

<canvas id=&#39;canvas&#39;></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 やストロークスタイルの色の値にある程度の透明度がある場合は、覆われた部分の一部が表示されたままになります。もちろん、重なり合う部分には他にも設定があります

線の属性:

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) など、前の変換を逆に実行する必要があります。それでも回転変換を実行する必要がある場合は、context.translate(-100,-200) 操作を再度実行する必要があります。この操作は非常に面倒ですが、Canvas には変形前のキャンバスの状態を保存する簡単な方法が用意されています。次のように

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

ログイン後にコピー

変換前に保存操作を実行し、変換完了後に復元操作を実行して前のキャンバスの状態を復元し、最初の変換が 2 番目の変換に影響を与えるのを防ぎます。

変換マトリックス---キャンバスは、より高度な変換方法を提供します。

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) について説明しています。もちろん、上記のスタイル値はストロークスタイルにも適用されます。

円弧を描く---円弧

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

ログイン後にコピー

これらのパラメータは、中心座標、半径、円弧の開始と終了、および反時計回りかどうかを表します(デフォルトはfalse)

描画するいくつかのメソッドをカプセル化できます円、円線、角丸長方形など。

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

現在の点 (x0, y0) と 3 つの点 (x1, y1) および (x2, y2) を組み合わせて、角度、2 つの側面に接する円弧は、arcTo 描画の効果です。もちろん、始点は現在点と終点(x2,y2)であり、これは直線+円弧の効果であり、radiusは円弧の半径です。以下に示すように。

適用可能なシナリオ: 一般に、円弧を描くには中心座標が必要です。 arcTo を使用すると、円の中心の座標がわからなくても円弧を描くことができます。

段落を挿入します:

Canvas を使用してグラフィック描画関数をカプセル化する場合、一般的な手順は ctx.save() と ctx.restore() を使用して関数の先頭と末尾をラップすることです。スタイル設定、変形設定、グラフィックスパスを描画する機能を行います。このパス関数は 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) は終点の円弧です。したがって、そのような円弧は必ずしも円弧であるとは限りません。

3次ベジェ曲線 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>

ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！