Canvas strokeStyle kifungu

Mwongozo wa Canvas

Inasemekana na matumizi

strokeStyle Kichwa cha kina kinachotumia kichwa cha rangi, mawimbi au pattern.

Mfano

Mfano 1

Kichwa cha kifungu. Tumia rangi ya mawimbi ya kina ya kichwa kichwa:

Kifungu chako cha kifungu hauzungumza taga canvas.

JavaScript:

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

Jifunze tena

Inasemekana

context.strokeStyle=color|gradient|pattern;

Chaguo cha kina

Chaguo Inasemekana
color Inaeleza rangi ya mawimbi wa kina Maviko ya rangi ya CSS）。Chaguo cha kuzingatia ni #000000。
gradient Kifungu cha mawimbi kinachotumika kwa kufungua kina ya mawimbi (Kifungu cha kinaauKifungu cha kina）。
pattern Kifungu cha pattern kinachotumika kwa kufungua mawimbi wa kina.

Vituo vya teknolojia

Chaguo cha kuzingatia: #000000

Mfano zaidi

Mfano 2

Kichwa cha kifungu. Tumia mawimbi ya mawimbi:

Kifungu chako cha kifungu hauzungumza taga canvas.

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");
// Kufungua kwa mawimbi
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

Jifunze tena

Mfano 3

Kuita ujumbe "codew3c.com" kwa mawimbi ya mawimbi ya mawimbi:

Kifungu chako cha kifungu hauzungumza taga canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Kufungua mawimbi
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Kufungua kwa mawimbi
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

Jifunze tena

Mwongozo wa kifungu

Inanuzo zilizotabuliwa zinaonyesha mawili wa kwanza wa kusimamia ujumbe huo wa kina.

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

Kigoma:Internet Explorer 8 na kuzingatia hali halisi haikubaliwa kufungua <canvas> element

Mwongozo wa Canvas