ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 Canvas_html5 チュートリアル スキルの使用方法

HTML5 Canvas_html5 チュートリアル スキルの使用方法

WBOY
リリース: 2016-05-16 15:45:36
オリジナル
1943 人が閲覧しました

canvas 要素は JavaScript を使用して Web ページ上に画像を描画しますが、描画機能はありません。

キャンバスは、ピクセルごとに制御できる長方形の領域です。

キャンバスには、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

いくつかの例を示します:

1. キャンバスを塗りつぶします

JavaScript コードコンテンツをクリップボードにコピーします
  1. <キャンバス ID="myCanvas" 幅="200" 高さ="100" style="border:1px 単色赤;"> <🎜; >
  2. <スクリプトタイプ="text/javascript">
  3. var c=document.getElementById("myCanvas");
  4. var cxt=c.getContext("2d"); cxt.fillStyle="#ccc"
  5. ; cxt.fillRect(5,10,150,60); //x, y, x, y
  6. 次のように実行します:

2. 座標を取得します

JavaScript コード

コンテンツをクリップボードにコピーします

  • XML/HTML コードコンテンツをクリップボードにコピー
    1. <div id="coordiv" スタイル="float:left;width:199px;height:99px;border:1pxsolid #c3c3c3" onmousemove="cnvs_getCoowned(event)" onmouseout="cnvs_clearCoowned()">div>
    2. <div id="xy座標" >div>

    次のように実行します:

    3. 線とグラフィックを描画します

    1) 次のように正方形を描きます。

    JavaScript コードコンテンツをクリップボードにコピーします
    1. <キャンバス ID="myCanvas" 幅="200" 高さ="100" style="border:1px Solid #c3c3c3;">
    2. お使いのブラウザは
    3. タグをサポートしていません。
    4. <スクリプトタイプ="text/javascript">
    5. var c=document.getElementById("myCanvas");
    6. var cxt=c.getContext("2d"); cxt.moveTo(10,10);
    7. //x,y 開始点
    8. cxt.lineTo(10,50);
    9. //x,y
    10. cxt.lineTo(50,50);
    11. //x,y
    12. cxt.lineTo(50,10);
    13. //x,y
    14. cxt.lineTo(10,10);
    15. //x,y
    16. cxt.ストローク();
    17. 以下のように実行します

    2) 次のように円を描きます:

    JavaScript コード

    コンテンツをクリップボードにコピーします
    1. <キャンバス ID="myCanvas" 幅="200" 高さ="100" style="border:1px Solid #c3c3c3;">
    2. お使いのブラウザはキャンバスをサポートしていません
    3. <スクリプトタイプ="text/javascript">
    4. var c=document.getElementById("myCanvas");
    5. var cxt=c.getContext("2d"); cxt.fillStyle=
    6. "#ccc"
    7. ; cxt.beginPath();
    8. cxt.arc(20,20,10,0,Math.PI*2,
    9. true
    10. );
    11. cxt.closePath(); cxt.fill();
    12. 次のように実行します:
    4. グラデーションを描画します

    JavaScript コード

    コンテンツをクリップボードにコピーします

    <キャンバス ID="myCanvas"
    幅=
    1. "200" 高さ="100" style="border:1px Solid #c3c3c3;"> お使いのブラウザは タグをサポートしていません。
    2. <スクリプトタイプ=
    3. "text/javascript"
    4. >
    5. var c=document.getElementById(
    6. "myCanvas"
    7. ); var cxt=c.getContext("2d"
    8. );
    9. var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#000000"
    10. );
    11. //黒
    12. grd.addColorStop(1,
    13. "#FFFFFF"); //白
    14. cxt.fillStyle=grd
    15. cxt.fillRect(5,10,175,50);//x,y,x,y
    16. 次のように実行します:
    17. 5. 写真
    18. JavaScript コード
    コンテンツをクリップボードにコピーします

    1. <キャンバス ID="myCanvas" 幅="300" 高さ="200" style="border:1px Solid #c3c3c3;">
    2. お使いのブラウザは
    3. タグをサポートしていません。
    4. <スクリプトタイプ="text/javascript">
    5. var c=document.getElementById("myCanvas");
    6. var cxt=c.getContext("2d");
    7. var
    8. img=new Image() img.src=
    9. "aa.png"
    10. cxt.drawImage(img,10,20);
    11. //x,y
    12. 実行は次のとおりです:

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

    原文:

    http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート