文章はあなたを連れてcanvasの小さいゲームを作ります(1)
2897 ワード
まずcanvasの基本的な使い方と属性を学びましょう.
canvasはhtml 5が提供するラベルで、彼はキャンバスの役割で、jsコードで描くことができる内容です!canvasのデフォルトサイズは:300*150;ブラウザがcanvasに互換性がない場合、canvasラベルの内容がcanvas使用手順:1に表示されます.canvasラベル2を取得します.現在のcanvasラベルのペイントコンテキストを取得します.var ctx=cv.getContext('2 d')/コンテキスト//getContextはファクトリ関数3と見なすことができる.コンテキスト(オブジェクト)のペイントAPIを呼び出してペイント
簡単に線を引く手順:moveTo//canvasのブラシを開始点(x,y)に移動
描画パス:ctx.lineTo(300100)//(x,y)ストローク:ctx.stroke()/描画したパスをキャンバスに描画する_____________canvas設定幅の説明:canvas幅と高さ//現在のキャンバスの垂直方向と水平方向の画素点の数を指す.1.canvasタグにHTML属性で設定する.2.DOMオブジェクトのwidthおよびheight属性cvをjsで操作する.height=400; cv.width=600; canvasはスタイルで高さと幅を設定できません!!!(各ピクセルポイントのサイズが変更されたため)canvas座標系説明:座標系は現在のキャンバスの左上隅を原点xとし、右に大きくなり、y軸が下に大きくなる.canvasコンテキスト:ctxは、グラフィックソフトウェアのツールバー(大量のグラフィックツールを提供する)に相当します.ctxは、グラフィックを描画する関連する様々なAPIに相当します.
3 Dグラフィックコンテキストcv.getContext('webgl')/ブラウザ側処理3 Dグラフィックの描画塗りつぶしグラフィック:ctx.fill();//閉じていない場合、自動的に図形を塗りつぶし設定線のスタイル:ctxに閉じます.strokeStyle='green'; ctx.stroke(); 塗りつぶしスタイルの設定:ctx.fillStyle='#fff'; ctx.fill(); 新しいパスを開く:ctx.beginPath();//前に描画したコンテキストで描画したパスをゼロ以外の折り返し原則をクリアすることに相当します.領域が塗りつぶされているかどうかを確認するための原則です.表示する領域から線を引き出し、図形全体を通り抜けて、この線を図文と交差させます.線の起点を円心とし、線に沿って円を描く.反時計回り-1;正時計回り+1;結果加算:0はここで描画しないことを示します!!!0の説明で描画しません.閉じるパス:ctx.closePath(); 現在のパスの開始位置と終了位置の間に線を引くだけです.長方形をすばやく描画:ctx.rect(x,y,w,h)/x座標、y座標、幅、高さ/経路のみを描く;次の2つの方法は経路を生成しません.ctx.strokeRect(x,y,w,h);//線の長方形をすばやく描画します.ctx.fillRect(x,y,w,h);//塗りつぶし長方形をすばやく描画します.クリア矩形:ctx.clearRect(x,y,w,h);//キャンバスに表示されているコンテンツcanvasを消去するAPIでは、描画内容を消去する方法が1つしか提供されていません:clearRect作用:ある矩形領域の内容を消去し、表示されている内容を消去するだけで、経路に影響しません.canvasの描画方法:描画するときはキャンバス全体の内容を描画し、消去するときもキャンバス全体の内容をすべて消去し、再描画します.ctx.clearRect(0,0,cv.width,cv.height)//キャンバス全体を空にする___________canvas図面:ステータスベースです!経路と状態は全く違う内容で、お互いに影響しません!新しいパス(beginPath)をオンにしても、ステータスには影響しません.線幅の設定:ctx.lineWidth=1; 既定の線幅は1ピクセルですが、キャンバスに表示されるのは2ピクセルです.(しかも色が薄くなる)画面に表示される内容の最小単位は画素で、少なくとも1画素も表示され、canvasで線を描く場合は、現在の座標を中心に線幅の半分(線幅1、0.5画素拡張)を両側にそれぞれ拡張します.画面はそれぞれ1ピクセルずつ上下に拡張されます.そして色が薄くなります.ピクセルの幅の線を描き、0.5から描き始めます.円弧を描画:ctx.Arc(x,y,radius,startAngle,endangle,anticlockwise)円心点のx,y座標//半径の長さ//開始と終了の弧//描画方向(デフォルト順false)弧と角度の関係:1弧は180度を表す;πで弧を表す. 1π=180°//Math.sin()/Math.cos()パラメータも弧度
角度:angle弧度:radian角度円弧式:radian=angle/180*π;円弧回転角度の式:angle=radian/π*180;________________テキストの描画:1.strokeText(text); ctx.strokeText('文字',100100)ctx.font='';//文字フォントサイズctxを設定.measureText()/文字の幅を計算する.fillText(text); 文字揃え:文字水平揃えctx.textAlign='right/start/center'デフォルトstart左揃え
canvas{direction:ltr/rtl}//文字を右から左/反対endとstartは正反対;ctx.textBaseline//文字垂直整列方式小文字x底辺が文字のベースライン___________画像ctxを描画します.drawImage(image,dx,dy); (画像画像、x、y座標を表す)ステップ:1.var img =document.createElement('img');//var img=new Image(); 2. img.src='パス';3. img.οnlοad=function(){ ctx.drawImage(img,0,0); }//load事件本編記事連載、純手打、修正歓迎!
canvasはhtml 5が提供するラベルで、彼はキャンバスの役割で、jsコードで描くことができる内容です!canvasのデフォルトサイズは:300*150;ブラウザがcanvasに互換性がない場合、canvasラベルの内容がcanvas使用手順:1に表示されます.canvasラベル2を取得します.現在のcanvasラベルのペイントコンテキストを取得します.var ctx=cv.getContext('2 d')/コンテキスト//getContextはファクトリ関数3と見なすことができる.コンテキスト(オブジェクト)のペイントAPIを呼び出してペイント
簡単に線を引く手順:moveTo//canvasのブラシを開始点(x,y)に移動
ctx.moveTo(100,100);描画パス:ctx.lineTo(300100)//(x,y)ストローク:ctx.stroke()/描画したパスをキャンバスに描画する_____________canvas設定幅の説明:canvas幅と高さ//現在のキャンバスの垂直方向と水平方向の画素点の数を指す.1.canvasタグにHTML属性で設定する.2.DOMオブジェクトのwidthおよびheight属性cvをjsで操作する.height=400; cv.width=600; canvasはスタイルで高さと幅を設定できません!!!(各ピクセルポイントのサイズが変更されたため)canvas座標系説明:座標系は現在のキャンバスの左上隅を原点xとし、右に大きくなり、y軸が下に大きくなる.canvasコンテキスト:ctxは、グラフィックソフトウェアのツールバー(大量のグラフィックツールを提供する)に相当します.ctxは、グラフィックを描画する関連する様々なAPIに相当します.
3 Dグラフィックコンテキストcv.getContext('webgl')/ブラウザ側処理3 Dグラフィックの描画塗りつぶしグラフィック:ctx.fill();//閉じていない場合、自動的に図形を塗りつぶし設定線のスタイル:ctxに閉じます.strokeStyle='green'; ctx.stroke(); 塗りつぶしスタイルの設定:ctx.fillStyle='#fff'; ctx.fill(); 新しいパスを開く:ctx.beginPath();//前に描画したコンテキストで描画したパスをゼロ以外の折り返し原則をクリアすることに相当します.領域が塗りつぶされているかどうかを確認するための原則です.表示する領域から線を引き出し、図形全体を通り抜けて、この線を図文と交差させます.線の起点を円心とし、線に沿って円を描く.反時計回り-1;正時計回り+1;結果加算:0はここで描画しないことを示します!!!0の説明で描画しません.閉じるパス:ctx.closePath(); 現在のパスの開始位置と終了位置の間に線を引くだけです.長方形をすばやく描画:ctx.rect(x,y,w,h)/x座標、y座標、幅、高さ/経路のみを描く;次の2つの方法は経路を生成しません.ctx.strokeRect(x,y,w,h);//線の長方形をすばやく描画します.ctx.fillRect(x,y,w,h);//塗りつぶし長方形をすばやく描画します.クリア矩形:ctx.clearRect(x,y,w,h);//キャンバスに表示されているコンテンツcanvasを消去するAPIでは、描画内容を消去する方法が1つしか提供されていません:clearRect作用:ある矩形領域の内容を消去し、表示されている内容を消去するだけで、経路に影響しません.canvasの描画方法:描画するときはキャンバス全体の内容を描画し、消去するときもキャンバス全体の内容をすべて消去し、再描画します.ctx.clearRect(0,0,cv.width,cv.height)//キャンバス全体を空にする___________canvas図面:ステータスベースです!経路と状態は全く違う内容で、お互いに影響しません!新しいパス(beginPath)をオンにしても、ステータスには影響しません.線幅の設定:ctx.lineWidth=1; 既定の線幅は1ピクセルですが、キャンバスに表示されるのは2ピクセルです.(しかも色が薄くなる)画面に表示される内容の最小単位は画素で、少なくとも1画素も表示され、canvasで線を描く場合は、現在の座標を中心に線幅の半分(線幅1、0.5画素拡張)を両側にそれぞれ拡張します.画面はそれぞれ1ピクセルずつ上下に拡張されます.そして色が薄くなります.ピクセルの幅の線を描き、0.5から描き始めます.円弧を描画:ctx.Arc(x,y,radius,startAngle,endangle,anticlockwise)円心点のx,y座標//半径の長さ//開始と終了の弧//描画方向(デフォルト順false)弧と角度の関係:1弧は180度を表す;πで弧を表す. 1π=180°//Math.sin()/Math.cos()パラメータも弧度
角度:angle弧度:radian角度円弧式:radian=angle/180*π;円弧回転角度の式:angle=radian/π*180;________________テキストの描画:1.strokeText(text); ctx.strokeText('文字',100100)ctx.font='';//文字フォントサイズctxを設定.measureText()/文字の幅を計算する.fillText(text); 文字揃え:文字水平揃えctx.textAlign='right/start/center'デフォルトstart左揃え
canvas{direction:ltr/rtl}//文字を右から左/反対endとstartは正反対;ctx.textBaseline//文字垂直整列方式小文字x底辺が文字のベースライン___________画像ctxを描画します.drawImage(image,dx,dy); (画像画像、x、y座標を表す)ステップ:1.var img =document.createElement('img');//var img=new Image(); 2. img.src='パス';3. img.οnlοad=function(){ ctx.drawImage(img,0,0); }//load事件本編記事連載、純手打、修正歓迎!