12、canvas标签之阴影

来源：互联网发布：日期提醒软件编辑：程序博客网时间：2024/06/11 20:08

阴影

  .shadowOffsetX,shadowOffsetY x轴、y轴偏移
.shadowBlur 阴影模糊度
  .shadowColor 阴影颜色
      默认颜色:rgba(0,0,0,0)

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/canvas{background:#9f6;margin:100px auto;display:block;}</style></head><body><!--身体--><canvas width="500" height="500" id="can">您的浏览器不支持canvas标签，请您更换浏览器！！</canvas><script>/*阴影shadowOffsetX,shadowOffsetY    x轴、y轴偏移shadowBlur    阴影模糊度shadowColor  阴影颜色默认颜色:rgba(0,0,0,0)*/var can = document.getElementById("can");var cxt = can.getContext("2d");cxt.font = "bold 40px 微软雅黑";//设置字体cxt.textBaseline = "hanging";//设置文本上下对齐方式cxt.shadowOffsetX = 15;//设置X轴偏移cxt.shadowOffsetY = 15;//设置y轴偏移cxt.shadowBlur = 10;//设置模糊度cxt.shadowColor ="#f06";//设置阴影颜色var fw = cxt.measureText("中国你好，重庆你好").width;cxt.fillText("中国你好，重庆你好",(can.width-fw)/2,0);cxt.strokeText("中国你好，重庆你好",(can.width-fw)/2,200);</script></body></html>

0 0