Rumah  >  Artikel  >  hujung hadapan web  >  Cipta kecerunan jejari JS menggunakan matriks dalam HTML

Cipta kecerunan jejari JS menggunakan matriks dalam HTML

WBOY
WBOYke hadapan
2023-09-21 13:09:04799semak imbas

Cipta kecerunan jejari JS menggunakan matriks dalam HTML

Kecerunan matriks jejari JSR dicipta dengan cara berikut. Anda boleh cuba menjalankan kaedah berikut untuk mencipta kecerunan JS Radial menggunakan matriks -

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>

Atas ialah kandungan terperinci Cipta kecerunan jejari JS menggunakan matriks dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam