Canvas は HTML5 の一部であり、スクリプト言語で画像を動的にレンダリングできるようになります。 Canvas は領域を定義します。JavaScript コードは領域にアクセスし、完全な描画関数 (API) を通じて Web ページ上に動的レンダリングを実行できます。
2. Canvasでできることゲーム: ゲームが HTML5 の分野で重要な役割を果たしていることに疑いの余地はありません。 HTML5 は、Web ベースの画像表示という点で Flash よりも 3 次元的で洗練されています。
チャートの作成: チャートの作成は人々に無視されがちですが、企業内または企業間のコミュニケーションと協力はチャートから切り離せません。現在、一部の開発者は HTML/CSS を使用してアイコンを作成しています。もちろん、SVG (Scalable Vector Graphics) を使用してチャート作成を完了することも非常に良い方法です。
フォント デザイン: フォントのカスタム レンダリングは完全に Web ベースで行われ、HTML5 テクノロジを使用して実装されます。
グラフィック エディタ: グラフィック エディタは 100% Web ベースにすることができます。
Web サイトに埋め込むことができるその他のコンテンツ (グラフィックス、オーディオ、ビデオ、その他の多くの要素など) は、Web とより適切に統合でき、プラグインは必要ありません。
3. Canvasの基本的な使い方1. <canvas> を使用する場合は、最初にその幅と高さの属性を設定し、描画可能領域のサイズを指定する必要があります。スタイルを追加したり画像を描画したりせずに幅と高さだけを指定すると、要素はページ上に表示されません。 。
<canvas id='draw' width='200px' height='200px'></canvas>
2. 画像を描画するには、まずキャンバスを取得して getContext() メソッドを呼び出し、次にコンテキスト名 (2D/3D) を渡す必要があります。 2D には 2 つの基本的な描画操作があります。 ) | これら 2 つのプロパティのデフォルト値は #000 です。
vardraw = document.getElementById('draw'); //ブラウザが <canvas> 要素をサポートしているかどうかを確認します if(draw.getContext){ var context =draw.getContext('2d'); context context.drawingStyle = '#f00' // 内部の塗りつぶされた草原の色 context.fillStyle = '#0f0';}3. toDataURL() メソッドを使用して、<canvas> 要素に描画された画像をエクスポートします。
vardraw = document.getElementById('draw');if(draw.getContext){ //画像を表示します。toDataURL() は Base64 の文字列を取得します。 = document.createElement('img'); ドキュメント.body.appendChild(イメージ);4. 四角形を描画するには 3 つの主なメソッドがあります。fillRect() は四角形の塗りつぶしの色、ストロークRect() は四角形のストローク、clearRect() は四角形をクリアします。これら 3 つのメソッドはすべて、4 つのパラメーター x/y/w/h、四角形の左上隅の座標、幅と高さを受け取ります。
vardraw = document.getElementById('draw'); //ブラウザが <canvas> 要素をサポートしているかどうかを確認します if(draw.getContext){ var context =draw.getContext('2d');緑色の輪郭のエッジ context.fillStyle = '#f00'; context.drawingStyle = '#0f0'; context.fillRect(10,10,50,50); //赤いストロークで緑色の四角形を描画します context.fillStyle = '#f00'; , 50); context.fillRect(10,10,50,50); // 2 つの四角形が重なっている小さな四角形をクリアします context.clearRect(40,40,10,10);}5. パスを描画します。パスを描画するには、まず beginPath() メソッドを呼び出してから、次のメソッドを使用して実際にパスを描画します。
円弧(x,y,半径,開始角度,終了角度,反時計回り)
(x, y) 円の中心座標、半径、(startAngle、endAngle) 開始角度と終了角度、反時計回り (false)/反時計回り (true)
moveTo(x,y) は、線を描画せずにカーソルを (x,y) に移動します。いわゆる前の点の座標を変更するために使用できます*
弧まで(x1,y1,x2,y2,半径)
前の点から開始して (x2, y2) まで、(x1, y1) を通過する指定された半径の曲線を描きます。
lineTo(x,y) は、前の点から (x,y) まで直線を描きます。
ect(x,y,幅,高さ)
幅と高さを幅と高さとして、(x, y) から始まる長方形を描画します。このメソッドは、ストロークRect()およびfillRect()によって描画される独立した形状の代わりに、長方形のパスを描画します。
//次に数字なしで時計を描画します vardraw = document.getElementById('draw');if(draw.getContext){ var context =draw.getContext('2d'); //開始パス context.beginPath( ); /外側の円を描画します context.arc(100,100,99,0,2*Math.PI,false); //内側の円を描画します context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //分針を描画します context.moveTo(100,100); ,15) ; //時針を描画します context.moveTo(100,100); // ストローク パス context.ストロークスタイル = '#f00';6. テキストを描画するには、fillText() とストロークText() という 2 つの主なメソッドがあり、どちらも 4 つのパラメータ |text (描画されるテキスト)|x|y|最大ピクセル幅 (オプション)| を受け取ります。以下の3つの属性に基づいて
フォントのテキストスタイル、サイズ、フォントなど。
textAlign テキストの配置 |開始|終了|左|右|中央|
textBaseline テキスト|上|吊り下げ|中|アルファベット|表意文字|下|のベースライン。
// 文字盤に 12 時を描画します context.font = 'bold 12px Arial'; context.textAlign = 'middle'; context.textBaseline = 'middle';
7. 変身
rotate(angel) は、原点を中心に画像角度をラジアン回転させます。
scale(scaleX,scaleY) は画像をスケールします。x*scaleX,y*scaleY のデフォルトは 1 です。
translation(x,y) は座標原点を (x,y) に移動します
vardraw = document.getElementById('draw'); if(draw.getContext){ var context =draw.getContext('2d'); //外側の円を描画します context.arc( 100,100,99,0,2*Math.PI,false); //内側の円を描画します context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //原点を変換します context.translate(100,100); //針を回転します context.rotate(1) //分針のコンテキストを描画します。 moveTo(0, 0); context.lineTo(0,-85); //時針を描画します context.moveTo(0,0); // ストローク パス context.ストロークスタイル = '#f00';8. 画像を描画します、drawImage()
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9 つのパラメータ: 描画する画像、元の画像 |x|y|w|h|、ターゲット画像 |x|y|w|h|
9. 影とグラデーション
Shadow には主に次の属性値があります。
var context =draw.getContext('2d'); //シャドウを設定します context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; 4 つのパラメータ |x1|y1|x2|y2| は始点の座標と終点の座標です var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0 は開始を意味します gradient.addColorStop(1,'#000'); //1 は終了を意味します定義されたグラデーション属性 context.fillStyle = gradient; //塗りつぶすときにグラデーションを入れます context.fillRect(30,30,50,50);放射状グラデーション createRadialGradient() を作成します。6 つのパラメーター |x1|y2|radius1|x2|y2|radius2| は、それぞれ最初の円の中心と半径、2 番目の円の中心と半径です。使用法は線形グラデーションと同じです。
10. 画像データを使用すると、getImageData()によって元の画像データを取得できます。 4 つのパラメーター |x|y|w|h|。各 ImageData オブジェクトには、width/height/data という 3 つの属性があり、Data は各ピクセルのデータを内部に格納する配列です。各要素の値は 0 ～ 255 です。
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3];灰色のフィルター vardraw = document.getElementById('draw'){ var context =draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; // 元の画像を描画します context.drawImage(img,0,0,100,100);画像データの取得 imageData = context.getImageData(0,0,img.width,img.height); for(i=0,len=data.length;i<len;i+=4){ 赤 = データ[i]; 緑 = データ[i+2]; i+3]; //rgb の平均値を計算します = Math.floor((red+green+blue)/3) //カラー値を設定します data[i] = Average; ; データ[i+2] = 平均 } data; //キャンバスにデータを描画 context.putImageData(imageData,0,0)}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。