Cipta kecerunan jejari JS menggunakan matriks dalam HTML

WBOY
Lepaskan: 2023-09-21 13:09:04
ke hadapan
813 orang telah melayarinya

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>
Salin selepas log masuk

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!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan