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

百变鹏仔 3个月前 (10-18) #H5教程

文章标签矩形

本篇介绍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(&#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>

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集