キャンバスの学習とフィルターの実装コード

要素自体では定義されていません。ただし、キャンバスのgetContext()メソッドを通じて取得された「描画環境」オブジェクトで定義されています。 要素自体のデフォルトの幅と高さは、それぞれ 300 ピクセルと 150 ピクセルです。

2.1 キャンバスは長方形を描画します

// 处理canvas元素 var c = document.querySelector("#my-canvas"); c.width = 150; c.height = 70; // 获取 指定canvas标签 上的context对象 var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; // 颜色 ctx.fillRect(0, 0, 150, 75); // 形状

var c = document.querySelector("#my-canvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); // 开始坐标 ctx.lineTo(200, 100); // 结束坐标 ctx.stroke(); // 立即绘制

2.3 キャンバスは円を描画します

ctx.arc()インターフェイスの場合、5 つのパラメーターは

です。このうち、x、yは円の中心の座標、rは半径です。

とstopの単位はラジアンです。長さではなく、°ではありません。

var c = document.querySelector("#my-canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke();

2.4 キャンバス描画テキスト

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);

画像処理には 4 つの主要な API があります:画像の描画:

またはdrawImage(img,sx,sy,swidth,sheight,x,y,width,height)

画像データを取得します:

画像データの書き換え:putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

画像のエクスポート:toDataURL ([type, encoderOptions])

#3.2 画像の描画

これらの API に基づいて、canvas

./img/photo.jpg

4 フィルターを実装します

ここでは主に、各ピクセルの RGBA 値を返すgetImageData

4.1 色除去効果

グレー = 赤 * 0.3 緑 * 0.59 青 * 0.11

コードは次のとおりです。 :

ネガティブ カラー エフェクト最大値の値から現在の値を減算することです。 getImageData で取得される RGB の理論上の最大数値は 255 です。したがって、式は次のとおりです。

new_val = 255 - val

コードは次のとおりです。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、Html5 ビデオ チュートリアルをご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

HTML5 グラフィック チュートリアル

HTML5オンライン マニュアル

以上がキャンバスの学習とフィルターの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。