Komentar: HTML5 dapat menggambar gambar latar belakang gradien dan mengunduhnya secara otomatis. Berikut ini adalah langkah terperinci untuk semua orang. Teman yang suka tidak boleh melewatkannya.
drawbgline.html<! Doctype html>
<head>
<meta charset = "UTF-8"/>
<title> html5 menggambar gambar latar belakang gradien dan mengunduh secara otomatis </iteme>
</head>
<body>
<senter>
<selvas>/canvas>
</penter>
<script>
// Langkah 1: Dapatkan objek Canvas
var c = document.getElementById ("c");
// Langkah 2: Dapatkan objek konteks dari objek Canvas
var context = c.getContext ("2d");
/*
* Ini menggambar kode grafis lainnya
context.beginpath ();
Context.linewidth = 10;
context.strokestyle = "merah";
Context.moveto (50,50);
Context.lineto (150,50);
Context.stroke ();
context.closepath ();
//context.strokerect(220,50,50,50);
context.fillstyle = "biru";
Context.Fillrect (220,50,50,50);
context.beginpath ();
Context.arc (150.150,50,0*Math.pi/180, -180*Math.pi/180, false);
Context.lineto (150.150);
context.closepath ();
Context.stroke ();
context.linewidth = 1;
Context.font = "50px Songyi";
Context.FillText ("BRIP", 0,220);
Context.Save ();
Context.translate (50,50);
Context.Rotate (90*Math.pi/180);
context.beginpath ();
Context.linewidth = 10;
context.strokestyle = "merah";
Context.moveto (0,0);
Context.lineto (100,0);
Context.stroke ();
context.closepath ();
Context.Restore ();
*/
var g = context.createLineArgradient (0,0,0,200);
g.addcolorstop (0, "90bfff");
G.addcolorstop (1, "putih");
context.fillstyle = g;
Context.Fillrect (0,0,1.200);
window.location = c.todataurl ("gambar/jpeg"). ganti ("gambar/jpeg", "gambar/octet-stream");
</script>
</body>