ホームページ > 記事 > ウェブフロントエンド > HTMLのマトリックスを使用してJS放射状グラデーションを作成する
JSRradial Matrix グラデーションは次の方法で作成されます。次のメソッドを実行して、行列 -
var canvas1 = document.getElementById("canvas"); //canvas1 variable to identify given canvas var ctx1 = canvas.getContext("2d"); //This is used to tell context is 2D var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100, 100/horizontalScale,100/verticalScale,0); //This will create gradient with given canvas context gradient1.addColorStop(1,"green"); //New color green is added to gradient gradient1.addColorStop(0,"red"); //New color red is added to gradient ctx1.scale(horizontalScale, verticalScale); //Context matrix ctx1 is shrinked according to horizaontal and vertical scale ctx1.fillStyle = gradient; //Given gradient is drawn ctx1.fillRect(0,0, 100/horizontalScale, 100/verticalScale); //Rectangle is stretched according to scale ctx1.setTransform(0,1,1,0,1,1); //Context matrix is reset canvas { background-color: purple; } //Canvas is drawn with background color purple <canvas id = "canvas" width = "300" height = "300"></canvas>を使用して JS 放射状グラデーションを作成してみてください。
以上がHTMLのマトリックスを使用してJS放射状グラデーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。