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

キャンバスを切り抜く/特定の幅と高さのHTML5キャンバスをエクスポートする

このために、現在のキャンバスに描画するための一時的なキャンバスを作成します。その後、一時的なキャンバスでtoDataUrl（）メソッドを使用します-

var c = document.getElementsByTagName("canvas");
var ctx = c[0].getContext("2d");
var data = ctx.getImageData(0, 0, c[0].width, c[0].height);
var compositeOperation = ctx.globalCompositeOperation;

ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "#800000";
ctx.fillRect(0,0,c[0].width,c[0].height);

var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = 550;
tempCanvas.height = 280;
tCtx.drawImage(canvas[0],0,0);

  1. HTML5キャンバスでベジェ曲線を描く方法は？

    HTML5のタグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 canvas要素にはgetContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得します。この関数は、コンテキスト2dのタイプという1つのパラメーターを取ります。 HTML5キャンバスでベジェ曲線を描画するには、bezierCurveTo（）メソッドを使用します。このメソッドは、指定されたポイントを現在のパスに追加し、指定されたコントロールポイントを持つ3次ベジェ曲線によって前のパスに接続されます。 次のコー

  2. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>