JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptを使ってキャンバス（Canvas）に画像を描画する方法

HTML5の<canvas>要素に画像を描画するには、Canvas APIが提供するdrawImage()メソッドを使用します。このメソッドを利用することで、ページ上の<img>要素やJavaScriptで生成したImageオブジェクトを、キャンバス上の任意の位置に自由に配置できます。

サンプルコード

以下は、JavaScriptを使ってキャンバスに画像を描画するコード例です。ボタンをクリックすると、あらかじめ用意された画像がキャンバス内に描画されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>Drawing an image in canvas</h1>
<img class="flower" width="300" height="300"
    src="https://i.picsum.photos/id/976/300/300.jpg?hmac=Gwae8T0kvhjbWyNIAiYgOckWbK
BHGr2p_6EEE29uDDg" />
<canvas class="canvas1" width="300" height="300" style="border: 1px solid #d3d3d3;">
</canvas><br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to draw the image in canvas</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        var c = document.querySelector(".canvas1");
        var ctx = c.getContext("2d");
        var img = document.querySelector(".flower");
        ctx.drawImage(img, 10, 10);
    });
</script>
</body>
</html>

コードのポイント

  • getContext("2d")：キャンバスの2D描画コンテキストを取得します。このオブジェクトを通じて図形や画像の描画操作を行います。
  • drawImage(img, 10, 10)：第1引数に描画したい画像要素を指定し、第2・第3引数にはキャンバス上のX座標・Y座標を指定します。これにより画像がその位置から描画されます。
  • addEventListener("click", ...)：ボタンのクリックイベントに処理を登録し、ユーザーがクリックしたタイミングで画像の描画を実行しています。

出力結果

ページを読み込むと、元の画像と枠線のみの空のキャンバスが並んで表示されます。

JavaScriptを使ってキャンバス（Canvas）に画像を描画する方法

「CLICK HERE」ボタンをクリックすると、次のようにキャンバス内に画像が描画されます。

JavaScriptを使ってキャンバス（Canvas）に画像を描画する方法

  1. PIL（Pillow）を使ってTkinterのCanvasウィジェットに画像を埋め込む方法

    PythonのPillowライブラリは、基本的な画像処理機能をすべて備えたオープンソースのライブラリです。JPEGやPNGなど、さまざまな形式の画像を読み込み、処理し、操作するための機能を提供しています。ここでは、簡単な例を通じて、Pillowパッケージ（PIL）を使用してTkinterのキャンバスに画像を埋め込む方法を解説します。以下の手順に従ってください。手順必要なライブラリをインポートし、tkinterフレームのインスタンスを作成します。root.geometry()メソッドを使用して、フレームのサイズを設定します。Canvas()関数でCanvasウィジェットを作成し、height（高

  2. 【OpenCV】copyMakeBorder()で画像の周囲に境界線を描画する方法

    本記事では、PythonのOpenCVライブラリを使って、画像の周囲に境界線（ボーダー）を描画する方法を解説します。境界線の追加には、OpenCVが提供する cv2.copyMakeBorder() メソッドを使用します。 copyMakeBorder()メソッドとは cv2.copyMakeBorder() は、画像の上下左右に任意の幅の枠（境界線）を追加するための関数です。主な引数は以下のとおりです。 src：元となる画像 top / bottom / left / right：それぞれ上下左右に追加する境界線の幅（ピクセル数） borderType：境界線の種類（例：cv2.BORD