search

Home  >  Article  >  Web Front-end  >  How to overlay two rectangles on top of each other in html5

How to overlay two rectangles on top of each other in html5

零下一度
零下一度Original
2017-04-28 15:26:352970browse

This article introduces how to superimpose two rectangles on each other in html5. Be careful to use a browser that supports html5 

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

The above is the detailed content of How to overlay two rectangles on top of each other in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use the video element to create a video player in HTML 5Next article：Use the video element to create a video player in HTML 5

Related articles

See more