ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 Canvas API でdrawImage() メソッドを使用するためのコード例の共有 (図)
HTML5 Canvas API でdrawImage() メソッドを使用するためのコード例の共有 (図)
- 黄舟オリジナル
- 2017-03-15 16:19:091413ブラウズ
この記事では、主に HTML5 Canvas API のdrawImage() メソッドの使用例を紹介します。この記事では、主に画像の拡大縮小やトリミングに使用されます。この記事では、その座標と関連パラメーターの使用方法について説明します。必要な友達は、
drawImage() を参照してください。これは、画像、キャンバス、ビデオ を導入し、それらを拡大縮小したりトリミングしたりできる非常に重要なメソッドです。
表現には 3 つの形式があります:
文法 1
context.drawImage(img,dx,dy);
Gramm ar 3
- JavaScript
コンテンツをクリップボード context.drawImage(img,dx,dy,dw,dw);
にコピーして、座標スケッチを見てください:
PS: スタイルで
3 パラメーターのバージョンは標準形式であり、画像、キャンバス、またはビデオをロードするために使用できます。5 パラメーターのバージョンは画像をロードするだけでなく、指定した幅と高さに画像をズームすることもできます。スケーリングに加えてトリミングすることもできます。各パラメータの意味については、次の表を参照してください。 パラメータ-
操作結果:
ここでは、
clip
()と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 までご連絡ください。