HTML5 で Canvas 要素を使用してグラフィックを描画する方法

今日は、HTML5 での Canvas 要素の使用方法を共有します。これは一定の参考価値があるため、皆様のお役に立てれば幸いです。

#[おすすめコース: HTML5 チュートリアル]

canvas 要素

Web ページ上に画像を描画するには主に JavaScript を使用します。キャンバスは長方形の領域であり、各ピクセルを制御してパス、長方形、円を描画したり、画像を追加したりすることができます。この記事では、グラフィックスに色を追加するために使用される

html コード

<canvas id="demo"></canvas>

rectangle

fillStyle: を紹介します。 fillRect (x,y,width,height)

xx: 左上隅からの x 値

y: 左上隅からの y 値

幅、高さ:それはグラフィックです 幅と高さ

<script type="text/javascript">
var demo=document.getElementById("demo");
var fang=demo.getContext("2d");
fang.fillStyle="pink";
fang.fillRect(0,0,200,50);
</script>

Line

moveTo: 行の開始位置

lineTo: 終了位置

lineWidth: 線の幅

ストロークスタイル: カラー

ストローク: 描画開始

 var demo=document.getElementById("demo");
    var xian=demo.getContext("2d");
      xian.moveTo(10,10);
      xian.lineTo(100,100);
      xian.lineWidth=2;
      xian.strokeStyle="pink";
      xian.stroke();

Circle

##beginPath(): 開始パス

arc(x,y,r,sAngle,eAngle,counterwatchwise)

x,y:round中心点の座標

r: 円の半径

sAngle、eAngle: 円の開始角度と終了角度

反時計回り: 反時計回りかどうかを指定します。または時計回りに時針を描きます。 False = 時計回り、True = 反時計回り。

var demo=document.getElementById("demo");
    var yuan=demo.getContext("2d");
    yuan.beginPath();
    yuan.arc(100,100,50,0,2*Math.PI);
    yuan.strokeStyle="pink";
    yuan.stroke();

グラフィック挿入

drawImage(img,sx,sy,swidth,sheight ,x,y,width,height)

sx,sy: カットされた x、y 座標の位置

swidth,sheight: カットされた画像の幅と高さ

x,y: キャンバス上の画像の X,Y 座標位置を配置します

width,height: 使用する画像の幅と高さ

var demo=document.getElementById("demo");
var img1=document.getElementById("img1");
var img=demo.getContext("2d"); 
img1.onload=function(){  
img.drawImage(img1,10,10,100,120)

要約: 以上がこの記事の全内容です。この記事が皆様のお役に立てれば幸いです。

以上がHTML5 で Canvas 要素を使用してグラフィックを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。