کدوں و3 سی درجہ آن لائن معلومات
HTML سیریز معلومات
براوزر اسکریپت
سرور اسکریپت
پروگرامنگ تربیت
XML سیریز معلومات
بنیادی دستورات کتاب
معلومات دستورات
کورس تیبل
معلومات دستورات
هیٹل عناصر (ترتیب حروفی)
هیٹل عناصر (ترتیب کاربردی)
هیٹل براوزر سپورٹ
HTML عالمی خصوصیات
هیٹل ایونٹ
HTML رنگ نام
هیٹل کینو
هیٹل ویڈیو/آؤڈیو
HTML حروف چینی
HTML ڈاکومن کا نوع
HTML URL کد کاری
HTML زبان کا کد
HTML ملک کا کد
HTTP پیغام
HTTP کا طریق
کلیڈیو کیوریٹ کیوریٹ
HTML کا تگ
<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<search>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
</a></li> <li><a href="/ur/tags/tag_tfoot.html" title="HTML <tfoot> کا علامت"><tfoot></a></li> <li><a href="/ur/tags/tag_th.html" title="HTML <th> کا علامت"><th></a></li> <li><a href="/ur/tags/tag_thead.html" title="HTML <thead> کا علامت"><thead></a></li> <li><a href="/ur/tags/tag_time.html" title="HTML <time> کا علامت"><time></a></li> <li><a href="/ur/tags/tag_title.html" title="HTML <title> کا علامت"><title></a></li> <li><a href="/ur/tags/tag_tr.html" title="HTML <tr> کا علامت"><tr></a></li> <li><a href="/ur/tags/tag_track.html" title="HTML <track> کا علامت"><track></a></li> <li><a href="/ur/tags/tag_tt.html" title="HTML <tt> کا علامت"><tt></a></li> <li><a href="/ur/tags/tag_u.html" title="HTML <u> کا علامت"><u></a></li> <li><a href="/ur/tags/tag_ul.html" title="HTML <ul> کا علامت"><ul></a></li> <li><a href="/ur/tags/tag_var.html" title="HTML <var> کا علامت"><var></a></li> <li><a href="/ur/tags/tag_video.html" title="HTML <video> کا علامت"><video></a></li> <li><a href="/ur/tags/tag_wbr.html" title="HTML <wbr> کا علامت"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/ur/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>HTML canvas fillStyle 属性</h1> <div class="backtoreference"> <p><a href="/ur/tags/html_ref_canvas.html">HTML5 کینس مرجع دستنوشت</a></p> </div> <div> <h2>定义和用法</h2> <p><code>fillStyle</code> 属性设置或返回用于填充绘画的颜色、渐变或模式。</p> </div> <div> <h2>实例</h2> <h3>实例 1</h3> <p>定义用蓝色填充的矩形：</p> <canvas id="myCanvas" class="canvas_example"> آپ کا براوزر کینس تگ نہیں سپورٹ کرتاہے. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.fillStyle="#0000ff"; ctx.fillRect(20,20,150,100); } </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); <mark>ctx.fillStyle="#0000ff";</mark> ctx.fillRect(20,20,150,100); </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=eg_html5_canvas_fillstyle">آپ خود کا تجربہ کریں</a></p> <p class="tip"><span>提示：</span>页面底部提供更多实例。</p> </div> <div> <h2>语法</h2> <pre>context.fillStyle=<i>color</i>|<i>gradient</i>|<i>pattern</i>;</pre> <h3>属性值</h3> <table class="dataintable"> <tr> <th style="width:25%;">值</th> <th>描述</th> </tr> <tr> <td><i>color</i></td> <td>指示绘图填充色的 <a href="/ur/css/css_colors_legal.html" title="CSS قانونی رنگ">CSS 颜色值</a>。默认值是 #000000。</td> </tr> <tr> <td><i>gradient</i></td> <td>用于填充绘图的渐变对象（<a href="/ur/tags/canvas_createlineargradient.html" title="HTML5 کینس کا متد createLinearGradient()">线性</a>或<a href="/ur/tags/canvas_createradialgradient.html" title="HTML5 کینس کا متد createRadialGradient()">放射性</a>）</td> </tr> <tr> <td><i>pattern</i></td> <td>用于填充绘图的 pattern 对象</td> </tr> </table> </div> <div> <h2>تکنیکی تفصیلات</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">مقصد:</th> <td>#000000</td> </tr> </table> </div> <div> <h2>بیشتر مثال</h2> <h3>مثال 2</h3> <p>چند رنگ سے بننے والی درجہ بندی کا معیار، جو مستطیل کی پرنگاہ کے طور پر استعمال کیا جاتا ہے، تعریف کریں:</p> <canvas id="myCanvas2" class="canvas_example"> آپ کا براوزر کینس تگ نہیں سپورٹ کرتاہے. </canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas2"); var ctx=canvas.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100); </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); <mark>ctx.fillStyle=my_gradient;</mark> ctx.fillRect(20,20,150,100); </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=eg_html5_canvas_fillstyle_gradient">آپ خود کا تجربہ کریں</a></p> <h3>مثال 3</h3> <p>چند رنگ سے بننے والی درجہ بندی کا معیار، جو مستطیل کی پرنگاہ کے طور پر استعمال کیا جاتا ہے، تعریف کریں:</p> <canvas id="myCanvas3" class="canvas_example"> آپ کا براوزر کینس تگ نہیں سپورٹ کرتاہے. </canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas3"); var ctx=canvas.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100); </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); <mark>ctx.fillStyle=my_gradient;</mark> ctx.fillRect(20,20,150,100); </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=eg_html5_canvas_fillstyle_gradient2">آپ خود کا تجربہ کریں</a></p> <h3>مثال 4</h3> <p>چند رنگ سے بننے والی درجہ بندی کا معیار، جو مستطیل کی پرنگاہ کے طور پر استعمال کیا جاتا ہے، تعریف کریں:</p> <canvas id="myCanvas4" class="canvas_example"> آپ کا براوزر کینس تگ نہیں سپورٹ کرتاہے. </canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas4"); var ctx=canvas.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(0.5,"red"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100); </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(0.5,"red"); my_gradient.addColorStop(1,"white"); <mark>ctx.fillStyle=my_gradient;</mark> ctx.fillRect(20,20,150,100); </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=eg_html5_canvas_fillstyle_gradient3">آپ خود کا تجربہ کریں</a></p> <h3>مثال 5</h3> <p>استعمال ہونے والی تصویر:</p> <img id="lamp" src="/i/lamp.gif" alt="lamp" style="margin:10px 0 0 0;" /> <p>تصویر کا استعمال کرکے ڈرائنگ پرنگاہ:</p> <canvas id="myCanvas5" class="canvas_example"> آپ کا براوزر HTML5 کا کینس تگ نہیں سپورٹ کرتاہے. </canvas> <script type="text/javascript"> document.getElementById("lamp").onload=function() { var c=document.getElementById("myCanvas5"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext('2d'); var img=this; var pat=ctx.createPattern(img,'repeat'); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill(); } } </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); <mark>ctx.fillStyle=pat;</mark> ctx.fill(); </pre> <p class="tiy"><a target="_blank" href="/ur/tiy/t.html?f=eg_html5_canvas_createpattern">آپ خود کا تجربہ کریں</a></p> </div> <div> <h2>براوزر سپورٹ</h2> <p>جداول میں شمار کا معنای نہایت پہلے اس کی خصوصیت کو سپورٹ کرنے والی براوزر کی نسلیں کا ذکر کیا گیا ہے۔</p> <table class="browser-support"> <tr> <th class="bsChrome">کروم</th> <th class="bsEdge">ایج</th> <th class="bsFirefox">فائرفاکس</th> <th class="bsSafari">سافری</th> <th class="bsOpera">آپرا</th> </tr> <tr> <td>کروم</td> <td>ایج</td> <td>فائرفاکس</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="important"><span>توجہ:</span>اینٹرنیشنل ایکسپلورر 8 اور اس سے پچھلے کی نسلیں <canvas> علامت کو نہیں سپورٹ کرتی ہیں۔</p> </div> <div class="backtoreference"> <p><a href="/ur/tags/html_ref_canvas.html">HTML5 کینس مرجع دستنوشت</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> آلہ کا دکان </center><h3> <h5 id="tools_reference"><a href="/ur/tags/index.html">HTML مرجع دستنوشت</a></h5> <h5 id="tools_example"><a href="/ur/html/html_examples.html">HTML مثال</a></h5> <h5 id="tools_quiz"><a href="/ur/html/html_quiz.html">HTML امتحان</a></h5> <h5 id="tools_tutorial"><a href="/ur/html/index.html">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="/ur/about/index.html" title="کوئی بیت کا بار CodeW3C.com">کوئی بیت کا بار CodeW3C.com</a> <a href="/ur/about/about_helping.html" title="کمک CodeW3C.com">کمک CodeW3C.com</a> <a href="/ur/about/about_use.html" title="کوئی بیت کا استعمال">استعمال شرط</a> <a href="/ur/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> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>