Canvas createRadialGradient() 方法

ຕາຕະລາງຫລັງຈາກອີກອີກ

JS ປະກາດຄູ່ມື

JavaScript

Window

HTML DOM

Web API

HTML ໂອບຄົມ

</a></li> <li><a href="/lo/jsref/dom_obj_time.html" title="ໂອບເອັມໄອເດີ້ມ ພະຍາດ"><time></a></li> <li><a href="/lo/jsref/dom_obj_title.html" title="ໂອບເອັມໄອເດີ້ມ ຊື່"><title></a></li> <li><a href="/lo/jsref/dom_obj_track.html" title="ໂອບເອັມໄອເດີ້ມ ສະຖານ"><track></a></li> <li><a href="/lo/jsref/dom_obj_u.html" title="ໂອບເອັມໄອເດີ້ມ ບອບລາຍ"><u></a></li> <li><a href="/lo/jsref/dom_obj_ul.html" title="ໂອບເອັມໄອເດີ້ມ ບັນນາທິດ"><ul></a></li> <li><a href="/lo/jsref/dom_obj_var.html" title="ໂອບເອັມໄອເດີ້ມ ລະບົບ"><var></a></li> <li><a href="/lo/jsref/dom_obj_video.html" title="ໂອບເອັມໄອເດີ້ມ ວິດີໂອ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/lo/jsref/obj_cssstyledeclaration.html" title="ໂອບເອັມໄອເດີ້ມ ຄະຕິນແບບ">CSSStyleDeclaration</a></li> <li><a href="/lo/jsref/jsref_type_conversion.html" title="ການປ່ຽນປະເພດຂອງເຈັສຊາວ">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/lo/howto/index.html" title="ຄອມເວີບປະລິມານອອກຂອງ CodeW3C.com">ຄອມເວີບປະລິມານອອກຂອງ CodeW3C.com</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Canvas createRadialGradient() 方法</h1> <div class="btn-toref"> <p><a href="/lo/jsref/api_canvas.html">ປຶ້ມການປ່ຽນປະເພດ canvas</a></p> </div> <div> <h2>定义和用法</h2> <p><code>createLinearGradient()</code> 方法创建放射状/圆形渐变对象。</p> <p>渐变可用于填充矩形、圆形、线条、文本等等。</p> <p class="tip"><span>提示：</span>请使用该对象作为 <a href="/lo/tags/canvas_strokestyle.html" title="ປະສົມອັນສັນຂອງ canvas strokeStyle ຂອງ HTML 5">strokeStyle</a> 或 <a href="/lo/tags/canvas_fillstyle.html" title="ປະສົມອັນສັນຂອງ canvas fillStyle ຂອງ HTML 5">fillStyle</a> 属性的值。</p> <p class="tip"><span>提示：</span>请使用 <a href="/lo/tags/canvas_addcolorstop.html" title="ການໃຫ້ຄຳສັ່ງ addColorStop() ຂອງ canvas ຂອງ HTML5">addColorStop()</a> 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。</p> </div> <div> <h2>实例</h2> <p>绘制一个矩形，并用放射状/圆形渐变进行填充：</p> <canvas id="myCanvas" class="canvas_example"> ບັດຊີບັບຂອງທ່ານບໍ່ສະບາຍແຜ່ນ HTML5 canvas tag. </canvas> <script> window.onload=function() { var c=document.getElementById("myCanvas"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(10,10,150,100); } } </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=<mark>ctx.createRadialGradient(75,50,5,90,60,100)</mark>; grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,100); </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=eg_html5_canvas_createradialgradient">ທົດລອງດີຕະຫຼອດຂອງຕົນເອງ</a></p> </div> <div> <h2>ວິທິດທາງການສາຍ</h2> <pre>context.createRadialGradient(<i>x0</i>,<i>y0</i>,<i>r0</i>,<i>x1</i>,<i>y1</i>,<i>r1</i>);</pre> <h3>ຄຸນພາສາຂອງປະເພດ</h3> <table class="dataintable"> <tr> <th style="width:25%;">ປະເພດ</th> <th>ການອະທິບາຍ</th> </tr> <tr> <td><i>x0</i></td> <td>ວົງທີ່ສະຫຼາກຢູທີຂອງການປ່ຽນສະຫຼາກຢູທີ.</td> </tr> <tr> <td><i>y0</i></td> <td>ວົງທີ່ສະຫຼາກຢູທີຂອງການປ່ຽນສະຫຼາກຢູທີ.</td> </tr> <tr> <td><i>r0</i></td> <td>ວົງທີ່ສະຫຼາກຢູທີ.</td> </tr> <tr> <td><i>x1</i></td> <td>ວົງທີ່ສິ້ນສຸດຂອງການປ່ຽນສະຫຼາກຢູທີ.</td> </tr> <tr> <td><i>y1</i></td> <td>ວົງທີ່ສິ້ນສຸດຂອງການປ່ຽນສະຫຼາກຢູທີ.</td> </tr> <tr> <td><i>r1</i></td> <td>ລະດັບວົງທີ່ສິ້ນສຸດ.</td> </tr> </table> </div> <div> <h2>ບັດຊີບັບສະບາຍ</h2> <p>ຈຳນວນໃນຕາລະບັນໄດ້ກ່າວວ່າບລັກສະຕິບັດຄວາມສະບາຍຂອງບັນດາບັດຊີບັບບາງບັນດາຄວາມສະບາຍນີ້.</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">ຊາຟາຣີ</th> <th class="bsOpera">ໂອເປຣາ</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>ຊາຟາຣີ</td> <td>ໂອເປຣາ</td> </tr> <tr> <td>4.0</td> <td>9.0</td> <td>3.6</td> <td>4.0</td> <td>10.1</td> </tr> </table> <p class="note"><span>ບັນທືກ:</span>ການບໍ່ສະໜັບສະໜູນຂອງເຄື່ອງໝາຍ <canvas> ໂດຍອິນເຕີເອເລີ້ລ ທີ 8 ແລະຫນຶ່ງກ່ວານັ້ນ</p> </div> <div class="btn-toref"> <p><a href="/lo/jsref/api_canvas.html">ປຶ້ມການປ່ຽນປະເພດ canvas</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> ອຸປະກອນຊ່ວຍເຫຼືອ </center><h3> <h5 id="tools_reference"><a href="/lo/jsref/index.html">ປື້ມການປົກກະຕິ JavaScript ແລະ HTML DOM</a></h5> <h5 id="tools_example"><a href="/lo/js/js_examples.html">ການປະກອບຂອງເຈັສຊາວ</a></h5> <h5 id="tools_quiz"><a href="/lo/js/js_quiz.html">ການທົດລອງເຈັສຊາວ</a></h5> <h5 id="tools_tutorial"><a href="/lo/js/index.html">ການສອນເຈັສຊາວ</a></h5> </div> <div><h3><center> ທໍານາຍການສະໜັບສະໜູນ </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> ຂະບວນການຂອງ CodeW3C.com ສະແນວຫນຶ່ງສຳລັບການສຶກສາແລະການທົດລອງພຽງແຕ່ບໍ່ຮັບປະກັນຄວາມຖືກຕ້ອງຂອງຂະບວນການ. ຄວາມສ່ຽງທີ່ມາຈາກການໃຊ້ຂອງຂະບວນການນີ້ບໍ່ກ່ຽວຂ້ອງກັບຂະບວນການ. ສິດທິວິທະຍາສານຢູ່ໃນປະເທດ, ສິດທິທັງໝົດຖືກກັກຂັງ. </p> <p id="p2"> <a href="/lo/about/index.html" title="ກ່ຽວກັບ CodeW3C.com">ກ່ຽວກັບ CodeW3C.com</a> <a href="/lo/about/about_helping.html" title="ຊ່ວຍເຫຼືອ CodeW3C.com">ຊ່ວຍເຫຼືອ CodeW3C.com</a> <a href="/lo/about/about_use.html" title="ກ່ຽວກັບການນໍາໃຊ້">ຂໍ້ສັນຍາການນໍາໃຊ້</a> <a href="/lo/about/about_privacy.html" title="ກ່ຽວກັບຄວາມລັບຄວາມລັບຂອງພວກເຮົາ">ຂໍ້ສັນຍາຄວາມລັບ</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="ອຳນວຍການຈາກ Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>