<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qquickcontext2d.cpp -->
  <title>CanvasGradient QML Type | Qt Quick 5.15.0</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
    <div class="main">
    <div class="main-rounded">
        <div class="navigationbar">
        <ul>
<li><a href="../qtdoc/index.html">Qt 5.15</a></li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li><a href="qtquick-qmlmodule.html">QML Types</a></li>
<li>CanvasGradient QML Type</li>
<li id="buildversion"><a href="qtquick-index.html">Qt 5.15.0 Reference Documentation</a></li>
    </ul>
    </div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#methods">Methods</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">CanvasGradient QML Type</h1>
<span class="subtitle"></span>
<!-- $$$CanvasGradient-brief -->
<p>Provides an opaque CanvasGradient interface. <a href="#details">More...</a></p>
<!-- @@@CanvasGradient -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick 2.15</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign"> Qt 5.0</td></tr></table></div><ul>
<li><a href="qml-qtquick-canvasgradient-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="methods"></a>
<h2 id="methods">Methods</h2>
<ul>
<li class="fn">CanvasGradient <b><b><a href="qml-qtquick-canvasgradient.html#addColorStop-method">addColorStop</a></b></b>(<i>offset</i>,  string <i>color</i>)</li>
</ul>
<!-- $$$CanvasGradient-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<!-- @@@CanvasGradient -->
<h2>Method Documentation</h2>
<!-- $$$addColorStop[overload1]$$$addColorStopstring -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="addColorStop-method">
<td class="tblQmlFuncNode"><p>
<a name="addColorStop-method"></a><span class="type"><a href="qml-qtquick-canvasgradient.html">CanvasGradient</a></span> <span class="name">addColorStop</span>(<i>offset</i>,  <span class="type"><a href="../qtqml/qml-string.html">string</a></span> <i>color</i>)</p></td></tr>
</table></div></div>
<div class="qmldoc"><p>Adds a color stop with the given <i>color</i> to the gradient at the given <i>offset</i>. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.</p>
<p>For example:</p>
<pre class="cpp">
 var gradient <span class="operator">=</span> ctx<span class="operator">.</span>createLinearGradient(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">100</span>);
 gradient<span class="operator">.</span>addColorStop(<span class="number">0.3</span><span class="operator">,</span> <span class="type"><a href="../qtqml/qml-qtqml-qt.html">Qt</a></span><span class="operator">.</span>rgba(<span class="number">1</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span>));
 gradient<span class="operator">.</span>addColorStop(<span class="number">0.7</span><span class="operator">,</span> <span class="char">'rgba(0, 255, 255, 1'</span>);
</pre>
</div></div><!-- @@@addColorStop -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2020 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>