HTML canvas strokeStyle အရေးဉာဏ်

HTML5 Canvas မှတ်အသင်း

ဖော်ပြ နှင့် အသုံးပြု

strokeStyle အချက်အလက် စာပုံ သို့မဟုတ် ကြီးထင်ရှားမှုတူးရှည် အသုံးပြုသော အရေးဉာဏ်

အမှု

အမှု 1

ပုံစံ ကို ရေးသားပါ။ အဖျား အရေးဉာဏ် ဖြင့်:

သင်၏ ဘတ္တာန် က ကွန်ပျူတာဆိပ် ကို ထောက်ပံ့မှု မရှိပါဘူး。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

亲自试一试

ပြောက်လက်

context.strokeStyle=color|gradient|pattern;

အရေးဉာဏ်

ပြောင်းလဲ ဖော်ပြ
color ကြီးထင်ရှားမှုတူးရှည် အိမ် ကို အသုံးပြုသော အရေးဉာဏ် CSS အရေးဉာဏ် တီး။ မျှော်လင့်ချက် ဖြစ်သည် #000000。
gradient ကြီးထင်ရှားမှုတူးရှည် အိမ် ကို အသုံးပြုသော ကြီးထင်ရှားမှုတူးရှည် အိမ်တူးရှည်သို့မဟုတ်ရောချိုး)
pattern ကြီးထင်ရှားမှုတူးရှည် ပုံစံ ကို ဖွဲ့စည်းရန် အသုံးပြုသော ပုံစံ အိမ်

နည်းပညာဆိုင်ရာ အချက်

မျှော်လင့်ချက်: #000000

ပိုမိုသော အမှု

အမှု 2

ပုံစံကို ရေးသားပါ။ ကြီးထင်ရှားမှုတူးရှည် ဖြင့်:

သင်၏ ဘတ္တာန် က ကွန်ပျူတာဆိပ် ကို ထောက်ပံ့မှု မရှိပါဘူး。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

亲自试一试

အမှု 3

ကြီးထင်ရှားမှုတူးရှည် ဖြင့် စာပုံ "codew3c.com" ကို ရေးသားပါ:

သင်၏ ဘတ္တာန် က ကွန်ပျူတာဆိပ် ကို ထောက်ပံ့မှု မရှိပါဘူး。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// ကြီးထင်ရှားမှုတူးရှည်
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

မှတ်ချက်：Internet Explorer 8 နှင့် အရှည်အတန်း က <canvas> အခြေခံ အရာ ထောက်ပံ့ခဲ့သည်။

HTML5 Canvas မှတ်အသင်း