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

canvas shadowColor 属性

2018-10-23 00:35| 作者: admin| 查看: 614| 评论: 0|来自: 蚂蚁部落

shadowColor属性可以设置或者返回阴影的颜色。

颜色默认值是#000000。

语法结构:

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

参数解析:

(1).color:一个颜色值,用于设置阴影颜色。

浏览器兼容:

(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>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.shadowBlur=20;
  ctx.fillStyle="red";
  
  ctx.shadowColor="black";
  ctx.fillRect(20,20,100,80);
  
  ctx.shadowColor="blue";
  ctx.fillRect(140,20,100,80);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/23/003656en2bnncbt4jjf4ny.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码分别将阴影颜色设置为黑色和蓝色。


鲜花

握手

雷人

路过

鸡蛋
上一篇:canvas shadowBlur 属性下一篇:canvas rect()

最新评论

返回顶部