html文档中strokestyle,HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle

今天介绍canvas的另一个重要属性strokeStyle，strokeStyle属性定义了我们在canvas画布上进行图形绘制时的“笔触”，简单点说，就是定义了我们的画笔样式。另外，strokeStyle仅仅定义笔触样式，不能定义填充样式，填充样式需要用fillStyle定义，

属性名：strokeStyle

属性描述：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

属性默认值：#000000

属性值：颜色值、渐变或模式

js语法：context.strokeStyle=color|gradient|pattern;

属性值注解：color：指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。

gradient：用于填充绘图的渐变对象(线性或放射性)

pattern：用于创建 pattern 笔触的 pattern 对象

属性值示例：

(1)渐变。下面我们用渐变笔触绘制了一句：“Merry Christmas”。

//设置绘制文字大小及字体

cC.font = "30px Verdana";

//定义线性渐变

var lg = cC.createLinearGradient(0, 0, 200, 0);

lg.addColorStop("0", "magenta");

lg.addColorStop("0.5", "blue");

lg.addColorStop("1.0", "red");

//将渐变设定为笔触

cC.strokeStyle = lg;

//设定绘制文字

cC.strokeText("Merry Christmas", 0, 50);

(2)颜色。颜色值可以是定义颜色的单词(如：red)、具体颜色值(如：#000000)或者rgba颜色(如：rgba(0,0,255,0.8))

//用颜色值设置笔触并绘制矩形线框

cC.strokeStyle = '#3f3f42';

cC.strokeRect(10, 70, 50, 50);

//用rgba颜色设置笔触并绘制矩形线框

cC.strokeStyle = 'rgba(0,0,255,0.8)';

cC.strokeRect(70, 70, 50, 50);

(3)模式。模式指用createPattern()方法所定义的模式对象。

//获得img对象

var img = document.getElementById('img');

//图片加载完成后进行绘制操作

img.onload = function() {

//创建patten对象

var p = cC.createPattern(img, 'repeat');

//将patten对象设置为笔触

cC.strokeStyle = p;

//绘制矩形线框

cC.strokeRect(10, 140, 100, 100);

};

下面是我用于测试的完整代码：

Html5 Canvas strokeStyle

原图：

//获得页面元素

var c = document.getElementById('can');

//调用html5相关方法获得2D对象

var cC = c.getContext('2d');

//用颜色值设置笔触并绘制矩形线框

cC.strokeStyle = '#3f3f42';

cC.strokeRect(10, 70, 50, 50);

//用rgba颜色设置笔触并绘制矩形线框

cC.strokeStyle = 'rgba(0,0,255,0.8)';

cC.strokeRect(70, 70, 50, 50);

//设置绘制文字大小及字体

cC.font = "30px Verdana";

//定义线性渐变

var lg = cC.createLinearGradient(0, 0, 200, 0);

lg.addColorStop("0", "magenta");

lg.addColorStop("0.5", "blue");

lg.addColorStop("1.0", "red");

//将渐变设定为笔触

cC.strokeStyle = lg;

//设定绘制文字

cC.strokeText("Merry Christmas", 0, 50);

//获得img对象

var img = document.getElementById('img');

//图片加载完成后进行绘制操作

img.onload = function() {

//创建patten对象

var p = cC.createPattern(img, 'repeat');

//将patten对象设置为笔触

cC.strokeStyle = p;

//绘制矩形线框

cC.strokeRect(10, 140, 100, 100);

};

下面是测试效果图：

转载请注明出处