您的位置:首页> HTML5教程> canvas API

canvas strokeStyle

2018-10-20 14:39| 作者: admin| 查看: 802| 评论: 0|来自: 蚂蚁部落

此属性可以设置或者返回描边的样式,可以类比CSS设置边框的样式。

很多代码演示仅介绍了颜色作为strokeStyle属性的值。

其实此属性功能比较强大,渐变对象或者模式对象也可以作为它的属性值。

后面会通过代码实例详细介绍。

默认strokeStyle属性值为#000000。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.strokeStyle=color|gradient|pattern;

参数解析:

(1).color:设置描边的颜色,默认值为#000000。

(2).gradient:将描边设置为渐变,一个渐变对象。

(3).pattern:将描边设置为模式,一个模式对象。

浏览器兼容:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).Safari浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.lineWidth=5;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">浏览器不支持canvas</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144011ohdzrufvnkcpphpw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果不显示设置strokeStyles属性,它的默认值为#000000。

所以矩形的描边颜色为黑色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.strokeStyle="red";
  ctx.lineWidth=5;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">浏览器不支持canvas</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144033y9cczwzoe6zbbcyc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码将矩形的描边颜色设置为红色。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  let 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,100,40);
}
</script>
</head>
<body>
<canvas id="ant">浏览器不支持canvas</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144054heaspne4zk0843hs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码将矩形的描边设置为一个渐变对象。

可以看到,描边渐变好像是填充渐变将中间镂空。

不要想当然的认为,按照渐变是根据描边是垂直还是水平进行。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  let gradient=ctx.createLinearGradient(0,0,170,0);
  let img=document.getElementById("lamp")
  let pat=ctx.createPattern(img,"repeat");
  
  ctx.strokeStyle=pat;
  ctx.lineWidth=20;
  ctx.strokeRect(20,20,100,40);
}
</script>
</head>
<body>
<canvas id="ant">浏览器不支持canvas</canvas>
<img src="demo/js/img/lamp.jpg" id="lamp">
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/144115asjnjg967ha6u6c6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

表现效果好比是为描边设置背景图片。

strokeStyle属性值是一个CanvasPattern对象。

关于此对象可以参阅canvas createPattern()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部