コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 Canvas APIのdrawImage()メソッドの使用例_html5チュートリアルスキル

HTML5 Canvas APIのdrawImage()メソッドの使用例_html5チュートリアルスキル

WBOY
リリース： 2016-05-16 15:52:02
オリジナル
1801 人が閲覧しました

drawImage() は、画像、キャンバス、ビデオを導入し、それらを拡大縮小したりトリミングしたりできる重要なメソッドです。

表現には 3 つの形式があります:

文法 1

JavaScript コードコンテンツをクリップボードにコピーします
  1. context.drawImage(img,dx,dy);

文法 2

JavaScript コードコンテンツをクリップボードにコピーします
  1. context.drawImage(img,dx,dy,dw,dw);

文法 3

JavaScript コードコンテンツをクリップボードにコピーします
  1. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

コーディネートスケッチを見てみましょう:
2016325103525710.png (360×360)

追伸: スタイル内で の幅と高さを定義しないでください。定義しないと、中に描かれた絵が自動的に拡大または縮小されます。
3 パラメータ バージョンは標準形式であり、画像、キャンバス、またはビデオをロードするために使用できます。5 パラメータ バージョンは、画像をロードするだけでなく、9 パラメータの指定された幅と高さに画像を拡大縮小することもできます。バージョンは、スケーリングに加えてトリミングすることもできます。各パラメータの意味については、次の表を参照してください。

参数
描述
img
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 要使用的图像的高度。（伸展或缩小图像）

次に、画像を読み込んでみましょう。

JavaScript コードコンテンツをクリップボードにコピーします
  2. "zh">
  4. "UTF-8">
    5. drawImage()
    7. body {background: url(
  7. "./images/bg3.jpg") 繰り返し }
  8. #canvas { ボーダー: 1px ソリッド #aaaaaa; 表示: ブロック; マージン: 50px 自動; }
  12. "キャンバスワープ"> <キャンバス id=
  13. "キャンバス"> あなたのブラウザは Canvas をサポートしていませんか? ！早く変えてください！ ！
  • <スクリプト>
  • window.onload =
  • function(){
  • var Canvas = document.getElementById("canvas"); Canvas.width = 800;
  • Canvas.height = 600;
  • var
  • context = Canvas.getContext("2d"); context.fillStyle = "#FFF";
  • context.fillRect(0,0,800,600);
  • var
  • img = new
  • Image(); img.src = "./images/20-1.jpg"; img.onload = function
  • (){ context.drawImage(img,200,50);
  • };

    • 実行結果:
    2016325103645161.jpg (850×500)

    フォト フレームを作成します:
    ここでは、clip()、drawImage()、および 3 次ベジェ曲線 bezierCurveTo() を組み合わせて、上記のケースにハート型のフォト フレームを追加します~

    JavaScript コードコンテンツをクリップボードにコピーします
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     绘制心形相框   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
      
  • <スクリプト>   
  • window.onload = 関数(){
  • var canvas = document.getElementById("canvas");   
  • canvas.width = 800;   
  • canvas.height = 600;   
  • var context = canvas.getContext("2d");   
  • context.fillStyle = "#FFF";   
  • context.fillRect(0,0,800,600);   
  • context.beginPath();   
  • context.moveTo(400,260);   
  • context.bezierCurveTo(450,220,450,300,400,315);   
  • context.bezierCurveTo(350,300,350,220,400,260);   
  • context.clip();   
  • context.closePath();   
  • var img = new Image();   
  • img.src = "./images/20-1.jpg";   
  • img.onload = 関数(){
  • context.drawImage(img,348,240,100,100);   
  • }
  • };   
  •   
  •   
  •   

    • 运行結果：
    2016325103713253.jpg (300×286)

    は美しくありませんか? 良いですね、これまでのところ最も重要な遮蔽と画像裁断、および完了です。java.awt では、drawImage() も重要なメソッドの 1 つです。 drawImage() を使用すると、キャンバス上で世界中を呼び出すこともできます。重要な処理方法。

    関連ラベル：
    canvas html5
    ソース：php.cn
    前の記事：HTML5 Canvas API_html5 の Clip() メソッドを使用して領域画像をトリミングするチュートリアルのヒント 次の記事：画像圧縮アップロード機能を実装するための HTML5 の詳細_html5 チュートリアル スキル
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
    から 2024-04-06 15:33:12
    0
    1
    433
    PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
    から 2024-04-05 12:57:00
    0
    1
    456
    HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
    から 2024-04-02 11:47:56
    0
    1
    275
    ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
    から 2024-04-01 20:42:38
    0
    1
    259
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート