HTML5 рисует фоновое изображение градиента и автоматически загружает шаги реализации

Комментарий: HTML5 может рисовать фоновые изображения градиента и автоматически загружать их. Ниже приведен подробный шаг для всех. Друзья, которым это нравится, не должны пропустить это.

<! Doctype html>

<голова>

<meta charset = "utf-8"/>

<Title> HTML5 рисует фоновое изображение градиента и автоматически загружает </title>

</head>

<тело>

<Центр>

<Canvas>/Canvas>

</center>

<Скрипт>

// Шаг 1: Получите объект Canvas

var c = document.getElementbyId ("c");

// Шаг 2: Получить контекстный объект объекта Canvas

var context = c.getContext ("2d");

/*

* Это рисование других графических кодов

context.beginpath ();

Context.linewidth = 10;

context.strokestyle = "red";

context.moveto (50,50);

context.lineto (150,50);

Context.Stroke ();

context.closepath ();

//context.strokerect(220,50,50,50);

context.fillstyle = "Blue";

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 ();

контекст. Транслат (50,50);

Context.rotate (90*Math.pi/180);

context.beginpath ();

Context.linewidth = 10;

context.strokestyle = "red";

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, "белый");

context.fillstyle = g;

context.fillrect (0,0,1,200);

window.location = c.todataurl ("Image/jpeg"). Заменить ("Image/jpeg", "Image/Octet-Stream");

</script>

</body>