ความคิดเห็น: HTML5 สามารถวาดรูปภาพพื้นหลังการไล่ระดับสีและดาวน์โหลดโดยอัตโนมัติ ต่อไปนี้เป็นขั้นตอนโดยละเอียดสำหรับทุกคน เพื่อนที่ชอบไม่ควรพลาด
drawbgline.html<! doctype html>
<head>
<meta charset = "utf-8"/>
<title> HTML5 วาดภาพพื้นหลังการไล่ระดับสีและดาวน์โหลดโดยอัตโนมัติ </title>
</head>
<body>
<enter>
<Canvas>/Canvas>
</enter>
<script>
// ขั้นตอนที่ 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 ();
บริบท 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);
บริบท closepath ();
Context.stroke ();
Context.lineWidth = 1;
context.font = "50px songyi";
Context.fillText ("Brip", 0,220);
บริบท 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 ();
บริบท closepath ();
บริบท restore ();
-
var g = context.createLineargradient (0,0,0,200);
G.AddColorStop (0, "90BFFF");
G.AddColorStop (1, "White");
บริบท fillstyle = g;
Context.fillrect (0,0,1,200);
window.location = c.todataurl ("image/jpeg") แทนที่ ("image/jpeg", "image/octet-stream");
</script>
</body>