HTML5 Canvasゲーム開発(1)基礎知識_html/css_WEB-ITnose

1. 基本的なグラフィックを描画します

Canvas を使用するたびに、いくつかの「ルーチン」があります

1. HTML で Canvas キャンバスを作成します:

<canvas id="mycanvas" width="960px" height="580px">    浏览器不支持canvas   <!-- 如果不支持会显示这段文字 --></canvas>

2. Canvas タグを取得し、 2D オブジェクト:

var c = document.getElementById('mycanvas');  //获取标签var ctx = c.getContext("2d");   //返回一个用来绘制环境类型的环境，返回一个2D对象 ，该对象实现了一个画布使用的大多数方法。

1. 線を描く:

ctx.lineWidth = 10;    //设置线条宽度   ctx.strokeStyle = "red";  //设置线条的颜色ctx.beginPath();    //创建一个新的路径ctx.moveTo(10,10);      //将画笔光标位置移动到坐标（10,10）处ctx.lineTo(150,10);    //移动画笔到坐标（150,50）处ctx.stroke();          //开始绘制定义好的路径

ctx.lineCap="butt" を通じて線の形状を設定できます。可能な値は、butt、round、square の 3 つです。

2. 中空の長方形を描画します:

md5.strokeRect(100,100,200,240);   //绘制空心矩形的函数，四个参数分别表示起点X、Y坐标、矩形长、矩形宽

3. 中実の長方形を描画します:

方法 1: fillRext() 関数を使用します。実線の長方形を描画する場合、fillStyle を使用してグラフィックの色を設定できます。

方法 2:

md5.rect(10,10,70,40);md5.fill();

4. 円を描く:

arc() 関数を使用して円弧を描きます。パラメータは、円弧の中心 X、Y 座標、円弧の半径、開始角度、終了角度、反時計回りかどうかの 6 つです。 fill() 関数を呼び出して実線の円を描画できます。

5. 角丸長方形を描画します:

arcTo 関数を使用して、角丸長方形を描画します。パラメータは 5 つあります。P1 の X、Y、P2 の X、Y、および円弧の半径です。

6. Canvas 描画ボードを消去します:

clearRect() 関数。 4 つのパラメータ: X、Y、長さ、幅。

7. 複雑な描画：2次元ベジェ曲線、3次元ベジェ曲線。

8.clip()関数を使って、指定した領域に描画します。

9. カスタムグラフィックを描きます。

2. テキストを描画します

1. cxt.font: フォントのスタイルを設定します。

ctx.font = "30px Arial";    //设置文字大小和字体样式、字体大小、斜体效果

2. cxt.ストロークText(): テキストの内容を設定します。

中空テキスト!

パラメータはテキスト文字列、座標 X、座標 Y、テキスト幅の 4 つです。最後のパラメータは省略可能で、省略した場合、テキスト幅はテキスト全体の幅に自動的に設定されます。

ctx.strokeText("Hello World",100,50);   //设置文字内容

3. cxt.fillText(): テキストの内容を設定します。

しっかりとしたテキスト！

パラメータはストロークText();と同じです 4. ctx.textAlign=" ";テキストの配置を中央、左、右に設定します。

5. ctx.textBaseline=" "; テキストの垂直方向の配置を設定します: 上、中央、下、表意文字など。

3. 画像操作

1.drawImage() 関数を使用して画像を描画します: この関数には 3 つのプロトタイプがあります:

drawImage(image,dx,dy);drawImage(image,dx,dy,dw,dh);drawImage(image,sx,sy,sw,sh,dx,dydw,dh);

最初のパラメータは描画されるオブジェクトです。

画像を描画する方法 1:

HTML に次のコードを追加します:

<img id="face" src="1.jpg" alt="the face" width="240px" height="240px">

JavaScript コードは次のとおりです:

var img=document.getElementById("face");image.onload =function(){        ctx.drawImage(image,10,10);    }  

画像を描画する方法 2:

var image = new Image();    image.src = "1.jpg";    image.onload =function(){        ctx.drawImage(image,10,10);        ctx.drawImage(image,260,10,100,100);        ctx.drawImage(image,50,50,100,100,260,130,100,100);    } 

Monitorを必ず追加してください画像のオンロードイベント！

最初の関数は(10,10)から始まる全体の絵を描画します。

2番目の関数は、(260,10)から画像全体を長さ100、幅100の長方形の領域に描画します。

3つ目の関数は、絵の(50,50)から(100,100)までの部分を切り取って、座標(260,130)から描画を開始し、長さ100、幅100の長方形領域に配置することを意味します。 。

2. getImageDataとputImageDataを使って絵を描きます。

3. createImageData を使用して新しいピクセルを作成します。