التعليق: يمكن لـ HTML5 رسم صور خلفية التدرج وتنزيلها تلقائيًا. فيما يلي خطوة مفصلة للجميع. لا ينبغي أن يفوتها الأصدقاء الذين يحبونها.
DrawBgline.html<! doctype html>
<head>
<meta charset = "utf-8"/>
<title> HTML5 يرسم صورة خلفية التدرج وتنزيل </title> تلقائيًا </title>
</head>
<body>
<centre>
<Canvas>/canvas>
</center>
<script>
// الخطوة 1: احصل على كائن القماش
var c = document.getElementById ("c") ؛
// الخطوة 2: احصل على كائن السياق لكائن قماش
var context = c.getContext ("2d") ؛
/*
* هذه ترسم رموز رسومية أخرى
context.beginPath () ؛
context.linewidth = 10 ؛
context.strokestyle = "red" ؛
Context.Moveto (50،50) ؛
context.lineto (150،50) ؛
سياق. ضربة () ؛
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.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 = "red" ؛
context.moveto (0،0) ؛
context.lineto (100،0) ؛
سياق. ضربة () ؛
context.closepath () ؛
context.restore () ؛
*/
var g = context.createlineargradient (0،0،0،200) ؛
G.AddColorStop (0 ، "90bfff") ؛
G.AddColorStop (1 ، "White") ؛
context.fillStyle = g ؛
context.fillRect (0،0،1،200) ؛
window.location = c.todataurl ("Image/JPEG"). استبدال ("Image/JPEG" ، "Image/Octet-Stream") ؛
</script>
</body>