HTML5キャンバス上にランダムな色の正方形で満たされた円を描く
var canvas1 = document.getElementById('canvas'), // getting canvas element ctx1 = canvas1.getContext('2d'), // getting context x, y = 0, // initializing x and y coordinates diamet = canvas1.width, radius = diamet * 0.6; ctx1.translate(0.6, 0.6); //Making pixels sharper for(; y < diamet; y++) { // x/y grid for(x = 0; x < diamet; x++) { ctx1.fillStyle = getRndColor(); // Random color setting ctx1.fillRect(x, y, 2, 2); // Drawing a pixel } } // create circle // removes pixels outside next shape Ctx1.globalCompositeOperation = 'destination-in'; Ctx1.arc(radius, radius, radius, 0, 2*Math.PI); Ctx1.fill(); // reset Ctx1.globalCompositeOperation = 'source-over'; function getRndColor() { var r = 255*Math.random()|0, g = 255*Math.random()|0, b = 255*Math.random()|0; return 'rgb(' + r + ',' + g + ',' + b + ')'; }
-
HTML5キャンバスに長方形を描く方法は?
HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 canvas要素にはgetContextと呼ばれるDOMメソッドがあり、レンダリングコンテキストとその描画関数を取得します。この関数は、コンテキスト2dのタイプという1つのパラメーターを取ります。 HTML5キャンバスで長方形を描画するには、fillRect(x、y、width、height)メソッドを使用します: 次のコードを実行して、HTML5Canvasで長方形を描画する方法を学ぶことができます 例 <!DOCTYPE html&
-
HTML5でarc()を使用して円を描く方法は?
arc()メソッドは、canvas要素を使用してHTML5で円を作成するために使用されます。 arc()メソッドを使用する円の場合、開始角度を0に、終了角度を2*Math.PIに使用します。 これがarc()メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 x x座標 2 y y座標 3 r 円の半径 4 startingAngle ラジアン単位の開始角度 5 endingAngle ラジアン単位の終了角度 6 反時計回り(True / False)