تعليق: يدرك البرنامج التعليمي HTML5 تأثير لون التدرج في Photoshop ، يرجى الرجوع إليه
<! doctype html> <head>
<meta charset = utf-8>
<title> خطوط الرسم HTML5 ، الدوائر ، المستطيلات </title>
<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "</script </a >>
</head>
<script>
$ (وثيقة). ready (function () {
var c = document.getElementById ("drawbox") ؛
var draw = c.getContext ("2d") ؛ // احصل على مرجع إلى محتوى ثنائي الأبعاد ، اتصل برسم API </p> <p> // حدد كتلة التدرج
var grd = draw.createlineargradient (50،50،200،50) ؛ // الإحداثيات وطولها وعرضها
grd.addcolorstop (0 ، "Black") ؛ // ابدأ اللون
grd.addcolorstop (1 ، "الأخضر") ؛ // نهاية نقطة نقطة </p> <p> draw.fillstyle = grd ؛ // تعيين كأناقة ملء
Draw.FillRect (50،50،200،50) ؛ // املأ في المستطيل
})
</script>
</body>
<Canvas> </tanvas>
</body>
</html>
صورة التكاثر: