So legen Sie in HTML5 zwei Rechtecke übereinander-H5-Tutorial-php.cn

So legen Sie in HTML5 zwei Rechtecke übereinander

零下一度

Freigeben： 2017-04-28 15:26:35

Original

2934 Leute haben es durchsucht

In diesem Artikel wird erläutert, wie Sie in HTML5 zwei Rechtecke übereinander legen. Bitte beachten Sie, dass Sie einen Browser verwenden müssen, der dies unterstützt 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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo legen Sie in HTML5 zwei Rechtecke übereinander. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!