<canvas></canvas>は HTML5 の新しいタグで、グラフィックを描画するために使用されます。実際、このタグの特別な特徴は、このタグが JavaScript スクリプトを使用できる CanvasRenderingContext2D オブジェクトを取得できることです。このオブジェクトを描画用に制御します。
<canvas></canvas>はグラフィックを描画するための単なるコンテナであり、id、class、style などの属性に加えて、高さと幅の属性もあります。 <canvas>>要素に描画するには、主に 3 つの手順があります。
<canvas>要素に対応する DOM オブジェクトを取得します。以下は、単純な<canvas>描画の例です。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>キャンバス描画のデモ</title> <style type=text/css> #canvas{ border: 1px Solid #ADACB0;表示: ブロック; マージン: 20px 自動; } </style></head><body> <canvas id=canvas width=300 height=300>あなたのブラウザはまだキャンバスをサポートしていません </canvas></body><script type=text/javascript> var Canvas = document.getElementById(canvas); // オブジェクトの開始点を設定します。およびエンドポイント context.moveTo(10,10); context.lineTo(200,200); // スタイルを設定します context.lineWidth = 2; #F5270B; // context.blood();</script></html> を描画します。moveTo() で指定しない場合、lineTo() の開始点は前の点に基づきます。したがって、開始点を再選択する必要がある場合は、moveTo() メソッドを渡す必要があります。さまざまな線分にスタイルを設定する必要がある場合は、context.beginPath() を通じてパスを再度開く必要があります。例を次に示します。
<script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // オブジェクトの開始点と終了点を設定します context.beginPath(); 100,100); context.lineTo(700,400); #F5270B; // context.stop(); context.moveTo(100,200); // ここでの moveTo を lineTo に置き換えた場合の効果は、 context.lineTo(600,200); ) ; // ストロークスタイルの色に新しい値がある場合は、上で設定した値が上書きされます。 // lineWidth に新しい値がない場合は、上で設定した値に従って表示されます。 context.ストローク();</script >
長方形を描画するrect()、fillRect()、およびストロークRect()
<script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //rect メソッドを使用します context.rect(10,10,190,190); .fillStyle = #3EE4CB; コンテキスト.ストロークスタイル = #F5270B; //fillRect メソッドを使用します context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //strokeRect メソッドを使用します context.bloctStyle = #F5270B; //strokeRect メソッドと fillRect を使用します同時にメソッド context.fillStyle = #1424DE; #F5270B; context.ストロークRect(610,10,190,190);
ここで 2 つの点を説明する必要があります。 1 つ目の点は、ストローク() と fill() が描画される前後の順序です。fill() が後で描画される場合、ストロークの境界線が大きい場合は、ストローク() によって描画される境界線が描画されます。半分; 2 番目のポイント: fillStyle 属性またはストロークスタイル属性を設定する場合、この設定の最後のパラメータは透明度です。
長方形の描画に関連するものはもう 1 つあります。それは、長方形領域のクリアです: context.clearRect(x,y,width,height)。
受け取ったパラメータは、透明な長方形の開始位置、長方形の幅と長さです。
上記のコードでは、グラフの描画の最後に以下を追加します。
context.clearRect(100,60,600,100);
以下のような効果が得られます。
五芒星を描く五芒星を分析することで、各頂点の座標の規則を決定できます。ここで注意すべき点は、キャンバス内では Y 軸の方向が下であるということです。
対応するコードは次のとおりです。
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); // 頂点の座標を設定し、その頂点に基づいてパスを計算します (var i = 0; i) < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200); context.closePath(); // 境界線のスタイルと塗りつぶしの色を設定します。 context.fillStyle = #F6F152;最終的な効果:
線のプロパティ上記で使用した lineWidth 属性に加えて、ラインには次の属性もあります。
lineCap プロパティは、行末の行キャップのスタイルを設定または返します。次の値を取得できます。
lineJoin プロパティは、2 つの線が交わるときに作成される角のタイプを設定または返します。次の値を取得できます。
miterLimit プロパティは、最大マイター長を設定または返します (デフォルトは 10)。マイター長とは、2 本の線が交わる内側の角と外側の角の間の距離を指します。 miterLimit は、lineJoin 属性が miter の場合にのみ有効です。
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // lineCap プロパティをテストします。 context.moveTo(10,10); .moveTo(200,10); context.lineWidth=1; context.beginPath(); context.moveTo(200,50); context.lineWidth=10; ; context.moveTo(10,100); context.lineCap=round; context.bottom(); //square context.beginPath(); context.lineCap=square; // テストlinJoin プロパティ //miter context.beginPath(); context.moveTo(300,50); context.lineTo(300,150); context.lineJoin=miter; context.beginPath(); context.lineTo(400,150); context.lineJoin=round; //square context.beginPath(); context.moveTo(650,100); context.lineJoin=10; miterLimit 属性 context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineTo(700,150); context.lineWidth=10;
各属性の異なる値の効果は次のとおりです。
塗りつぶしスタイル色の設定に加えて、前に使用した fillStyle とストローク Style では他の塗りつぶしスタイルも設定できます。ここでは例として fillStyle を取り上げます。
線形勾配利用手順
(1) var grd = context.createLinearGradient( xstart , ystart, xend ,yend ) は線形グラデーションを作成し、開始座標と終了座標を設定します。
(2) grd.addColorStop(stop, color) は線形グラデーションに色を追加します。stop は 0 ～ 1 の値です。
(3) context.fillStyle=grd が context に代入されます。
放射状グラデーションこの方法は、最初のステップで受け取るパラメーターが異なることを除いて、線形勾配法に似ています。
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); は、開始円の中心の座標と半径、および終了円の中心の座標と半径を受け取ります。
ビットマップパディングcreatePattern( img ,repeat-style) は画像で埋められ、repeat-style にはrepeat、repeat-x、repeat-y、または no-repeat を指定できます。
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // 線形グラデーション var grd = context.createLinearGradient(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(1,#160303); // 放射状グラデーション変数grd = context.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0.25,#ECF811); ; grd.addColorStop(1,#160303); context.fillStyle = grd; //ビットマップ塗りつぶし var bgimg = new Image(); (){ var pattern = context.createPattern(bgimg,repeat); context.ストロークスタイル=#F20B0B; context.fillRect(600, 100, 200,200);効果は次のとおりです。
グラフィック変換変換: context.translate(x,y)、受け取ったパラメータは、x による x 軸方向の原点の変換と y の y 軸方向の変換です。
スケーリング: context.scale(x,y)、受け取ったパラメータは、x 座標軸が x 比率に従ってスケーリングされ、y 座標軸が y 比率に従ってスケーリングされることです。
Rotation: context.rotate(angle)、受け取ったパラメータは座標軸の回転角度です。
グラフィックを変更した後、次の描画は前の状態に従うため、初期状態に戻す必要がある場合は、 context.save();とcontext.restore();使用する必要があることに注意してください。現在の状態:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.fillStyle = #1424DE; (0,0,200,200); //scale() context.fillStyle = #F5270B; context.fillRect(500,50,200,200); context.fillStyle = #18EB0F; .PI / 4); context.fillRect(300,10,200,200);
効果は次のとおりです。
グラフィックス変換に関連するもう 1 つのことは、行列変換: context.transform(a, b, c, d, e, f, g) です。パラメータの意味は次のとおりです。
水平方向のスケーリング (デフォルトは 1)
b 水平方向の傾き (デフォルト 0)
c 垂直方向の傾き (デフォルト 0)
d 垂直スケーリング (デフォルト 1)
e 水平変位 (デフォルトは 0)
f 垂直変位 (デフォルトは 0)
各パラメータの効果は読者がご自身で検証していただけますので、ここでは一つ一つ紹介しません。
曲線を描く曲線を描画するには次の 4 つの関数があります。
context.arc(x,y,r,sAngle,eAngle,counterclockwise); 円弧/曲線の作成に使用されます (円または部分円の作成に使用されます)。受け取ったパラメータの意味:
| パラメータの意味 |
| :--- |:---|
| x | 円の中心の x 座標 |
|y|円の中心の Y 座標|
|r|円の半径|
|sAngle|ラジアン単位の開始角度 (円弧の円の 3 時の位置は 0 度です)|
|eAngle|ラジアン単位の終了角度|
|反時計回り|オプション。プロットを反時計回りに描画するか時計回りに描画するかを指定します。 False = 時計回り、True = 反時計回り |
以下に、いくつかの arc() 関数の例をいくつか示します。
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.drawingStyle = #F22D0D; context.beginPath(); 40 ,0,2*Math.PI); context.blood(); //半円を描画します context.beginPath(); context.arc(200,100,40,0,Math.PI); //反時計回りに半円を描画します context.arc(300,100,40,0,Math.PI,true) ; context.ストローク(); //閉じた半円を描画します。 context.arc(400,100,40,0,Math.PI); context.closePath();
効果は次のとおりです。
context.arcTo(x1,y1,x2,y2,r); キャンバス上で 2 つの接線の間に円弧/曲線を作成します。受け取ったパラメータの意味:
| パラメータ | 意味 |
|---|---|
| ×1 | 円弧の制御点の x 座標 |
| y1 | 円弧の制御点の y 座標 |
| ×2 | 円弧の終点の x 座標 |
| y2 | 円弧の終点の y 座標 |
| r | 円弧の半径 |
ここで注意する必要があるのは、arcTo 関数によって描画される曲線の開始点は、moveTo() 関数を通じて設定する必要があるということです。以下では、arcTo 関数を使用して角丸長方形を描画します。
function createRoundRect(context, x1, y1, width, height, radius) { // 左上隅に移動 context.moveTo(x1 + radius, y1) // 右上隅に接続する線分を追加します context.lineTo (x1 + 幅 - 半径, y1); //円弧を追加します context.arcTo(x1 + 幅, y1, x1 + 幅, y1 + radius, radius); // 右下隅に接続する線分を追加します context.lineTo(x1 + width, y1 + height - radius) // 円弧を追加します context.arcTo(x1 + width, y1 + height, x1); + width - radius, y1 + height , radius) // 左下隅に接続された線分を追加します context.lineTo(x1 + radius, y1 + height);円弧を追加します context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius) // 左上隅に接続する線分を追加します context.lineTo(x1, y1 + radius);円弧 Arc context.arcTo(x1, y1, x1 + radius, y1, radius); // Canvas 要素に対応する DOM オブジェクトを取得します。 var Canvas = document.getElementById('mc'); // Canvas 上に描画された CanvasRenderingContext2D オブジェクトを取得します。 var context = Canvas.getContext('2d');ストロークスタイル = #F9230B; 50); コンテキスト.ストローク();効果は次のとおりです。
context.quadraticCurveTo(cpx,cpy,x,y); パラメータの意味は次のとおりです。
| パラメータ | 意味 |
|---|---|
| CPX | ベジェ制御点の x 座標 |
| CPY | ベジェ制御点の y 座標 |
| × | 終点のx座標 |
| y | 終点のy座標 |
曲線の開始点は、現在のパスの最後の点です。パスが存在しない場合は、beginPath() メソッドと moveTo() メソッドを使用して開始点を定義します。
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 次のパラメーターを使用して 3 次ベジェ曲線を描画します。
| パラメータ | 意味 |
|---|---|
| cp1x | 最初のベジェ制御点の x 座標 |
| CP1Y | 最初のベジェ制御点の y 座標 |
| cp2x | 2 番目のベジェ制御点の x 座標 |
| CP2Y | 2 番目のベジェ制御点の y 座標 |
| × | 終点のx座標 |
| y | 終点のy座標 |
テキストのレンダリングに関連するプロパティとメソッドは主に 3 つあります。
| 財産 | 説明する |
|---|---|
| フォント | テキストコンテンツの現在のフォントプロパティを設定または返します |
| テキスト整列 | テキストコンテンツの現在の配置を設定または返します |
| テキストベースライン | テキストを描画するときに使用される現在のテキスト ベースラインを設定または返します |
| 方法 | 説明する |
|---|---|
| fillText() | キャンバス上に塗りつぶされたテキストを描画します |
| ストロークテキスト() | キャンバス上にテキストを描画します (パディングなし) |
| メジャーテキスト() | 指定されたテキスト幅を含むオブジェクトを返します。 |
上記のプロパティとメソッドの基本的な使用法は次のとおりです。
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.font=bold 30px Arial; // スタイルを設定します context.drawingStyle = #1712F4; 30,100); context.font=bold 50px Arial = context.createLinearGradient( 30) , 200, 400, 300 );// グラデーション塗りつぶしスタイルを設定します grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.75) 、#2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.save(200,280); .ストローク(); context.font=bold 20px Arial; #F80707; context.textAlign=left; context.fillText(指定された位置 200,300 から始まります); context.textAlign=center; context.fillText(指定された位置 200,350 に配置されます); .textAlign= right; context.fillText(テキストは指定された位置で終了します, 200, 400); context.moveTo(10,500); context.lineTo(500,500); context.fillStyle=#F60D0D; context.textBaseline=top; 10,500); context.fillText (指定された位置は下、150,500); context.textBaseline=middle; context.restore(); context.font=bold 40px Arial; #16F643; var text = 私のブログへようこそ! ; context.ストロークテキスト(私のブログへようこそ!,10,600); context.ストロークテキスト(上記の文字列の幅は: +context.measureText(text).width,10,650);
効果は次のとおりです。
その他のプロパティとメソッド影の描画:先ほど描いた五芒星に影を付けてみましょう
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); // 頂点の座標を設定し、その頂点に基づいてパスを計算します (var i = 0; i) < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200); context.closePath(); // 境界線のスタイルと塗りつぶしの色を設定します。 context.fillStyle = #F5270B; context.shadowColor = #F7F2B4; context.シャドウオフセットY = 30; context.shadowBlur();効果は次のとおりです。
グラフィックの組み合わせ:globalAlpha: 図面の現在のアルファまたは透明度の値を設定または返します。
このメソッドは主にグラフィックスの透明度を設定するためのものですが、ここでは詳しく紹介しません。
globalCompositeOperation: 新しいイメージを既存のイメージに描画する方法を設定または返します。このメソッドには次の属性値があります。
| 価値 | 説明する |
|---|---|
| ソースオーバー | ターゲット画像の上にソース画像を表示 (デフォルト) |
| ソーストップ | ソース画像を宛先画像の上に表示します。ターゲット イメージの外側にあるソース イメージの部分は表示されません。 |
| ソースイン | ターゲット画像内にソース画像を表示します。宛先画像内のソース画像の部分のみが表示されます。宛先画像は透明です。 |
| ソースアウト | ターゲット画像に加えてソース画像も表示します。ソース画像のうちデスティネーション画像の外側の部分のみが表示され、デスティネーション画像は透明になります。 |
| 目的地越え | ソース画像の上にターゲット画像を表示する |
| 目的地の上 | ソース画像の上に宛先画像を表示します。ソース画像の外側にあるターゲット画像の部分は表示されません |
| 宛先入力 | ソース画像内に宛先画像を表示します。ソース画像内のターゲット画像の部分のみが表示され、ソース画像は透明になります。 |
| 宛先出力 | ソース画像に加えてターゲット画像も表示します。ソース画像の外側のターゲット画像の部分のみが表示され、ソース画像は透明になります。 |
| ライター | ソース画像+ターゲット画像を表示 |
| コピー | ソース画像を表示します。対象画像を無視する |
| クソ | XOR 演算を使用してソース画像と宛先画像を結合する |
クリックして組み合わせを変更する方法の小さな例を次に示します。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>グラフィックの組み合わせ</title> <style type=text/css> #canvas{ border: 1px Solid #1C0EFA; : ブロック; マージン: 20px 自動; } #ボタン{ 幅: 1000 ピクセル; クリア: 両方;フォントサイズ: 18px; 表示: ブロック; マージン左: 20px; } </style></head><body> <canvas id=canvas width=1000 height=800> Canvas </canvas> <div id=buttons> <a href=#>ソースオーバー</a> <a href=#>ソースオーバー</a> <a href=#>ソースイン</a> <a href=#>ソースアウト</a> <a href=#>デスティネーションオーバー</a> <a href=#>デスティネーショントップ</a> <a href=#>宛先入力</a> <a href=#>宛先出力</a> <a href=#>軽量</a> <a href=#>コピー</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){draw(source-over) = document.getElementById(buttons); getElementsByTagName(a); for (var i = 0; i < button.length; i++) {buttons[i].onclick = function(){draw(this.text); }}; functiondraw(compositeStyle){ var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // タイトルを描画します。 context.font = 太字 40px Arial; context.textAlign = 中央; context.fillStyle = #150E0E; context.fillText(globalCompositeOperation = +compositeStyle, Canvas.width/2, 60); // 四角形を描画します context.fillStyle = #F6082A; // 三角形のコンテキストを描画します。 globalCompositeOperation = コンポジットスタイル = #1611F5; context.beginPath(); context.moveTo(1000,750); context.closePath(); </html>読者はラベルをクリックして、さまざまな組み合わせの効果を確認できます。
クリッピングエリア:Clip() メソッドは、元のキャンバスから任意の形状とサイズを切り取ります。
ヒント: 領域をクリップすると、その後のすべての描画はクリップされた領域に制限されます (キャンバス上の他の領域にはアクセスできません)。また、clip() メソッドを使用する前に save() メソッドを使用して現在のキャンバス領域を保存し、将来いつでも (restore() メソッド経由で) 復元することもできます。
以下は、円を使用して長方形を切取る例です。
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.fillStyle = #0C0101; context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.fill(); context.fillStyle = #F60825; 50);
上記の属性とメソッドに加えて、次のメソッドもあります。
drawImage(): 画像、キャンバス、またはビデオをキャンバスに描画します。
toDataURL(): グラフィックを保存
isPointInPath(): 指定されたポイントが現在のパス内にある場合は true を返し、それ以外の場合は false を返します。
ここでは一つ一つ例をあげません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。