大佬教程收集整理的这篇文章主要介绍了HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
今天介绍canvas的另一个重要属性strokeStyle，strokeStyle属性定义了我们在canvas画布上进行图形绘制时的“笔触”，简单点说，就是定义了我们的画笔样式。另外，strokeStyle仅仅定义笔触样式，不能定义填充样式，填充样式需要用fillStyle定义，fillStyle属性在另一篇博文中有详细介绍（http://www.voidcn.com/article/p-yjmlhkor-se.html）。
属性描述：strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
属性值：颜色值、渐变或模式
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,200,0); lg.addColorStop("0","magenta"); lg.addColorStop("0.5","blue"); lg.addColorStop("1.0","red"); //将渐变设定为笔触 cC.strokeStyle = lg; //设定绘制文字 cC.strokeText("Merry Christmas",50);
//用颜色值设置笔触并绘制矩形线框
cC.strokeStyle = '#3f3f42';
cC.strokeRect(10,70,50,50);
//用rgba颜色设置笔触并绘制矩形线框
cC.strokeStyle = 'rgba(0,0.8)';
cC.strokeRect(70,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);
};
下面是我用于测试的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Html5 Canvas strokeStyle</title>
</head>
<body>
<canvas id="can" width="500" height="300"></canvas>
原图：
<img src="3.jpg" alt="原图" id="img">
</body>
<script type="text/javascript">
//获得页面元素
var c = document.getElementById('can');
//调用html5相关方法获得2D对象
var cC = c.getContext('2d');
//用颜色值设置笔触并绘制矩形线框
cC.strokeStyle = '#3f3f42';
cC.strokeRect(10,50);
//设置绘制文字大小及字体
cC.font = "30px Verdana";
//定义线性渐变
var lg = cC.createLinearGradient(0,50);
//获得img对象
var img = document.getElementById('img');
//图片加载完成后进行绘制操作
img.onload = function() {
//创建patten对象
var p = cC.createPattern(img,100);
};
</script>
</html>
本文连接：http://www.voidcn.com/article/p-kqqczvan-se.html
转载请注明出处
以上是大佬教程为你收集整理的HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle全部内容，希望文章能够帮你解决HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。