Tutorial HTML5 untuk mencapai kesan kecerunan Photoshop_kemahiran tutorial HTML5

Salin kod

Kod tersebut adalah seperti berikut:

garisan HTML5, bulatan, lukisan segi empat tepat
http://ajax.googleapis.com/ajax/libs/jquery/ 1.7. 1/jquery.min.js">>


$(dokumen).ready(function() {
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //Dapatkan rujukan kepada kandungan 2d dan panggil API lukisan

//Tentukan blok kecerunan
var grd=draw.createLinearGradient(50,50,200,50); //Koordinat, panjang dan lebar
grd.addColorStop(0,"black"); titik Warna
grd.addColorStop(1,"hijau"); //Warna akhir

draw.fillStyle=grd; //Tetapkan sebagai gaya isian
draw.fillRect(50,50,200,50); //Isi segi empat tepat
})



;

Rendering: