Latest web development tutorials
×

JavaScript & HTML DOM справочное руководство

обзор

JavaScript объекты

JavaScript Array объекты JavaScript Boolean объекты JavaScript Date объекты JavaScript Math объекты JavaScript Number объекты JavaScript String объекты JavaScript RegExp объекты JavaScript Глобальные свойства / функции JavaScript операторы

Browser объекты

Window объекты Navigator объекты Screen объекты History объекты Location объекты

DOM объекты

HTML DOM Document объекты HTML DOM объект Element HTML DOM Атрибут объекта HTML DOM объекты событий

HTML объекты

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

HTML-холст addColorStop метод ()

Холст Ссылка на объект объект Canvas

примеров

Определить градиент от черного к белому, заливки прямоугольника стиль:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

Попробуйте »

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддержка addColorStop () метод.

Примечание: 8 и более ранние версии Internet Explorer не поддерживают элемент <Canvas>.


Определение и использование

addColorStop () метод определяет цвет объекта градиент и положение.

addColorStop () метод createLinearGradient () или createRadialGradient () используются вместе.

Примечание: Вы можете вызвать addColorStop () метод несколько раз , чтобы изменить градиент.Если вы не градиент объект, используя этот метод, градиент не будет виден. Для того чтобы получить видимый градиент, вам необходимо создать по крайней мере один цвет.

Синтаксис JavaScript: градиент.addColorStop (остановка, цвет);

Параметр Значение

参数 描述
stop 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。
color stop位置显示的 CSS 颜色值


примеров

Другие примеры

примеров

Она определяется множеством градиента addColorStop () метод:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

Попробуйте »


Холст Ссылка на объект объект Canvas