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

canvas shadowOffsetY 属性

2019-8-25 09:40| 作者: admin| 查看: 135| 评论: 0|来自: 蚂蚁部落

此属性可以设置或者返回阴影与图案的垂直偏移距离,默认值为0。

shadowOffsetY=0 说明阴影位于图案的正下方,也就是说阴影被图案覆盖。

shadowOffsetY=20 说明阴影相对于图案向下偏移20像素。

shadowOffsetY=-20 说明阴影相对于图案向下偏移-20像素。

下面会通过代码实例演示属性的具体作用,效果一目了然。

特别说明:如需调整阴影与形状的垂直距离,请使用shadowOffsetX属性。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.shadowOffsetY=number;

属性值说明:

(1).number:正值或负值,定义阴影与形状的垂直距离。

浏览器兼容:

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

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

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

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  ctx.shadowBlur=10;
  ctx.shadowOffsetY=20;
  ctx.shadowColor="black";
  ctx.fillStyle="red";
  ctx.fillRect(20,20,100,80);
}
</script>
</head>
<body>
<canvas id="ant">当前浏览器不支持canvas标签</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094142w3oeegllgmlwbt2w.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码设置属性值为20px,可以让阴影向下偏移20像素。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  ctx.shadowBlur=10;
  ctx.shadowOffsetY=20;
  ctx.shadowColor="black";
  ctx.fillStyle="red";
  ctx.fillRect(20,20,100,80);

  ctx.fillStyle="black";
  ctx.font="30px Verdana";
  ctx.fillText(ctx.shadowOffsetY,20,60);
}
</script>
</head>
<body>
<canvas id="ant">当前浏览器不支持canvas标签</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094214hsm028ax3z0xfps6.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此属性也可以返回设置的阴影垂直偏移量。


鲜花

握手

雷人

路过

鸡蛋
上一篇:canvas measureText()下一篇:canvas fillText()

最新评论

返回顶部