HTMLでのキャンバスの用途は何ですか?

HTML5 の 要素は、JavaScript を使用してグラフィックを描画するためのシンプルかつ強力な方法を提供します。グラフィックの描画、写真の合成、または単純な (それほど単純ではない) アニメーションの実行に使用できます。

は、「width」と「height」という 2 つの特定の属性と、id、name、class などのすべてのコア HTML5 属性のみを備えた単純な要素です。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

次のように getElementById() メソッドを使用すると、DOM 内の 要素を簡単に見つけることができます。 🎜>

HTML5 での Canvas 要素の使用の概要

var canvas = document.getElementById("mycanvas");

Canvas は、開発者が描画をカスタマイズするためのインターフェイスを提供します。 getContext() 関数を使用して、描画操作の描画コンテキストを取得できます。この関数では 2 つのパラメータを渡すことができます。最初のパラメータは、より一般的に使用される「2d」です。webOpenGL を使用して 3D 描画を実装することもできます。このブログでは主に2D描画関連の手法をまとめています。

1. 単純なグラフィックを描画する

Canvas を使用してフラット グラフィックを描画するのは比較的簡単です。たとえば、次の関数を使用して、長方形の領域を直接描画できます。

グラフィック効果は次のとおりです:

は、fillRect を使用して塗りつぶされた四角形を描画します。たとえば、

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.strokeRect(20,20,100,100);

効果は次のとおりです。

clearRect 関数を使用して、長方形の領域を消去します。例は次のとおりです。

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.fillRect(20,20,100,100);

効果は次のとおりです。

グラフィックスを描画する上記の方法は、実際には複合関数であり、パスの定義と描画の 2 つのステップを完了します。グラフィック パスをカスタマイズすることもできます。例:

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.strokeRect(20,20,100,100);
		context.clearRect(10,10,100,100);

効果は次のとおりです:

beginPath 関数はパスを開くために使用されます。を指定し、moveTo 関数を使用してブラシを移動します。 lineTo 関数を使用して線を定義します。線の開始点はブラシの現在位置であり、パラメーターは終了位置です。 closePath 関数はパスを閉じるために使用されます。もちろん、この関数を呼び出す必要はありません。閉じられていないグラフィックを描画することもできます。ストローク関数は定義されたグラフィックスを描画するために使用され、それに対応して塗りつぶしと描画を行うフィル関数があります。

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.beginPath();
		context.moveTo(20,20);
		context.lineTo(20,100);
		context.lineTo(100,100);
		context.closePath();
		context.stroke();

quadraticCurveTo 関数と bezierCurveTo 関数は、それぞれ 2 次ベジェ曲線パスと 3 次ベジェ曲線パスを作成するために使用されます。例は次のとおりです。

効果は次のとおりです。

ベジェ曲線に関する関連コンテンツについては、ブログ

		context.moveTo(20,120);
		context.quadraticCurveTo(20,200,100,180);
		context.stroke();
		context.moveTo(20,200);
		context.bezierCurveTo(20,300,60,300,60,200);
		context.stroke();

https://my.oschina.net/u/2340880/blog/1519503 をご覧ください。

arc 関数は円弧を作成するために使用されます。例:

arc 関数では、最初の 2 つのパラメーターは円の中心点を設定し、3 番目のパラメーターは半径を設定します。 、4 番目のパラメータ、および 5 番目のパラメータは、ラジアンで表される円弧の開始点と終了点を設定します。最後のパラメータは、逆に描画するかどうかを設定するブール値です。次のように、2 つの接線の間に円弧を描くために使用される arcTo 関数もあります。

効果は以下のようになります。

        context.moveTo(110,350);
		context.arc(60,350,50,0,2*Math.PI,false);
		context.stroke();

を使用します。クリップ この関数はトリミング操作を実行できます。トリミング後は、トリミングされた領域内にのみ後続の描画を描画できます。その効果は次のとおりです。

		context.moveTo(20,420);
		context.arcTo(80,420,80,600,50);
		context.stroke();

注意点は、クリップ機能を使用してトリミングした後、その後の描画はクリップされた領域内のみで行われるため、クリップされた領域の外側に描画したい場合は、保存および復元機能を使用する必要があります。クリッピングする前に、保存機能を使用して現在の描画コンテキストの状態を保存します。クリッピング領域の外側に描画したい場合は、復元機能を使用して描画コンテキストを復元します。

		context.rect(0,500,100,30);
		context.clip();
		context.fillRect(0,500,200,200);

2. テキストと画像の描画

前の例では、グラフィックスに加えて Canvas を使用しています。 Canvas を使用すると、画像やテキストを簡単に描画することもできます。次のように、drawImage 関数を使用して画像を描画します:

        var image = document.createElement("img");
		image.src = 'img/HBuilder.png';
		image.onload = function(){
				context.drawImage(image,0,600);
		}

需要注意，上面创建了img元素后，设置src属性后不能立刻进行渲染，因为图片的加载是需要时间的，直接渲染会无法获取图像数据。drawImage这个函数总共可以有8个参数，drawImage(img,sx,sy,sw,sh,x,y,w,h)。其中sx，sy和sw，sh用来对原图像进行裁剪，只选择图像中的部分进行绘制，x，y，w，h设置绘制在画布上的坐标和尺寸。

关于文本绘制，可以使用fillText或strokeText函数，分别用来绘制实心和空心文字。示例如下：

        context.font = "20px Georgia";//设置字体
 		context.textAlign = 'start';  //设置文字对齐方式
		context.fillText("Hello World",0,750,200);
		context.strokeText("Hello World",0,800,200);

效果如下：

3.绘制属性的设置

在绘制过程中，开发者可以对绘制的线条颜色，填充颜色，风格，阴影等进行设置。示例如下：

		context.fillStyle = 'red';  //设置填充颜色
		context.strokeStyle = 'blue'; //设置线条颜色
		context.shadowColor = 'green'; //设置阴影颜色
		context.shadowBlur = 10;   //设置阴影模糊度
		context.shadowOffsetX = 10; //设置阴影X轴偏移量
		context.shadowOffsetY = 5;  //设置阴影Y轴偏移量
		context.lineCap = 'round';  //设置线帽样式
		context.lineJoin = 'round'; //设置折点样式
		context.lineWidth = 1; //设置线条宽度

效果如下图：

关于fillStyle和strokeStyle两个属性比较特殊，从名字也可以了解其是设置填充或线条的风格，设置颜色只是一种方式，其还可以设置为一个渐变对象，用来实现渐变效果。例如：

		var g = context.createLinearGradient(0,750,200,750);
		g.addColorStop(0,'black');
		g.addColorStop(0.5,'red');
		context.fillStyle =  g;
		context.fillText("Hello World",0,750,200);

效果入下图：

createLinearGradient函数用来创建线性渐变层，其中4个参数设置起始点的x，y和结束点的x，y。调用addColorStop函数用来想渐变层中添加临界点和颜色值。也可以创建发散型渐变，例如：

        var g = context.createRadialGradient(70,800,20,70,800,50);
		g.addColorStop(0,'black');
		g.addColorStop(1,'red');
		context.fillStyle =  g;
		context.fillRect(20,750,100,100);

效果如下：

createRadiaGradient函数的前3个参数设置渐变开始处的圆弧(分别设置圆心x，y坐标和半径)，后3个参数设置渐变结束处的圆弧(分别设置圆心x，y坐标和半径)。

fillStyle和strokeStyle也可以设置为一个模式背景，例如将图片进行重复得到的背景，示例如下：

        image.onload = function(){
			var p = context.createPattern(image,'repeat');
		    context.fillStyle =  p;
			context.fillRect(20,750,200,200);
		}

效果如下图所示：

可选的重复模式还有：

repeat-x：只在水平方向重复。

repeat-y：只在竖直方向重复。

no-repeat：不重复，只显示一次。

4.进行画布转换

    画布也可以进行一些简单的变换操作，例如旋转，缩放等等。需要注意，对画布的操作不会影响到已经绘制到画布上的内容，之后绘制的内容会受到影响。使用scale(x,y)函数可以对画布进行缩放，其中两个参数x和y分别设置水平和竖直方向的缩放比例。rotate(angle)函数用来对画布进行旋转，其中的参数为旋转的角度值。translate(x,y)函数用来对画布进行平移，参数x，y分别设置水平和竖直方向的平移量。还有一个复合的transform(a,b,c,d,e,f)函数，使用这个函数可以一步设置平移，旋转和缩放属性，参数意义如下：

a：设置水平缩放比

b：设置水平倾斜

c：设置垂直倾斜

d：设置垂直缩放比

e：设置水平平移

f：设置垂直平移

需要注意，如果你多次调用transform，每次的transform变换都将在上一次的基础上进行。如果你不想保留上一次的记录，可以调用setTransform()函数来重置设置。

更多相关知识，请访问 PHP中文网！！