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

URLから画像を読み込み、HTML5Canvasに描画します

srcを設定した後、JavaScriptで画像オブジェクトを作成する必要があります。

ただし、描画する前にロードイベントを待つ必要があります。

以下はキャンバスです：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var myImg = new Image();
img.onload = function() {
   context.drawImage(myImg, 0, 0);
};
img.src = 'https://www.tutorialspoint.com/images/seaborn-4.jpg?v=2';

  1. HTML5キャンバスに長方形を描く方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 canvas要素にはgetContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得します。この関数は、コンテキスト2dのタイプという1つのパラメーターを取ります。 HTML5キャンバスで長方形を描画するには、fillRect（x、y、width、height）メソッドを使用します： 次のコードを実行して、HTML5Canvasで長方形を描画する方法を学ぶことができます 例 <!DOCTYPE html&

  2. HTML5キャンバスにSVGファイルを描画する方法は？

    SVGをキャンバスに描画するには、SVG画像を使用する必要があります。まず、HTMLを含む要素を使用します。その後、SVG画像をキャンバスに描画する必要があります。 例 次のコードを試して、HTMLキャンバスにSVGファイルを描画できます <!DOCTYPE html> <html>    <head>       <title>SVG file on HTML Canvas </title>    </head>    <