html5 实现如何将两个矩形相互叠加

互联网 17-4-28

$velocityCount

本篇介绍html5 实现如何将两个矩形相互叠加，注意要使用支持html5的浏览器

<!DOCTYPE html>  <html lang="en">    <head>      <meta charset="utf-8">      <title>Canvas Primer - Example: Drawing shadows</title>      <script type="text/javascript">          window.addEventListener('load', function () {                  //得到canvas，并检测是否支持canvas            var elem = document.getElementById('myCanvas');            if (!elem || !elem.getContext) {                  return;            }               // 得到可以画图的上下文context            var context = elem.getContext('2d');            if (!context) {                  return;            }               // 分别设置阴影的偏移坐标，阴影的虚化程度，阴影的颜色，图形的填充颜色，以及绘制图形。            context.shadowOffsetX = 10;            context.shadowOffsetY = 10;            context.shadowBlur    = 4;            context.shadowColor   = 'red';            context.fillStyle     = '#00f';            context.fillRect(20, 20, 150, 100);          }, false);          </script>            </head>          <body>      <p><canvas id="myCanvas" width="300" height="150">Your browser does not have       support for Canvas. </canvas></p>    </body>  </html>

以上就是html5 实现如何将两个矩形相互叠加的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： Html5