HTML5 Canvas API でdrawImage() メソッドを使用するためのコード例の共有 (図)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 Canvas API でdrawImage() メソッドを使用するためのコード例の共有 (図)

黄舟

Mar 15, 2017 pm 04:19 PM

この記事では、主に HTML5 Canvas API のdrawImage() メソッドの使用例を紹介します。この記事では、主に画像の拡大縮小やトリミングに使用されます。この記事では、その座標と関連パラメーターの使用方法について説明します。必要な友達は、

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

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

文法 1

context.drawImage(img,dx,dy);

ログイン後にコピー

Gramm ar 3

コード

コンテンツをクリップボード

context.drawImage(img,dx,dy,dw,dw);

ログイン後にコピー

にコピーして、座標スケッチを見てください:

PS: スタイルで

3 パラメーターのバージョンは標準形式であり、画像、キャンバス、またはビデオをロードするために使用できます。5 パラメーターのバージョンは画像をロードするだけでなく、指定した幅と高さに画像をズームすることもできます。スケーリングに加えてトリミングすることもできます。各パラメータの意味については、次の表を参照してください。

パラメータ説明オプション。剪断を開始する x 座標の位置。オプション。せん断を開始する y 座標の位置。幅はオプションです。切り取られた画像の高さ。 x画像のx座標位置をキャンバス上に配置します。 y画像のy座標位置をキャンバス上に配置します。幅オプション。使用する画像の幅。 (画像を拡大または縮小します) 高さ使用する画像の高さ。 (画像を伸縮させます)

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

ログイン後にコピー

	img
	sx
	sy
	s
はオプションです。トリミングされた画像の幅。	の身長




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

操作結果:

フォトフレームの作成:

ここでは、
clip HTML5 Canvas API でdrawImage() メソッドを使用するためのコード例の共有 (図) ()とdrawImage()と3次ベジェ曲線bezierCurveを組み合わせますTo() を作成するには上のケースに、ハート型のフォトフレームを加えました~

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>drawImage()</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    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);   
        }   
    };   
</script>   
</body>   
</html>

ログイン後にコピー

実行結果:

綺麗ですね?さて、最も重要なマスキングと画像のトリミングについての説明は終わりました。実際、drawImage() も java.awt の重要なメソッドです。 Javaのゲームインターフェースを作るとき、drawImage()の使い方を知っていれば、一手で世界を征服できる〜という人もいますが、Canvasでも同じです。アーティストが提供する素材は基本的に絵です。このとき、絵を加工するにはdrawImage()が非常に重要です。基本的なスキルであっても、写真を処理する最も重要な方法です。

以上がHTML5 Canvas API でdrawImage() メソッドを使用するためのコード例の共有 (図)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。