美文网首页Web 前端开发 HTML5让前端飞
初探HTML5——canvas元素(二)

初探HTML5——canvas元素(二)

作者: Sugar_Ye | 来源:发表于2017-10-22 17:00 被阅读0次

    本节主要涉及绘制矩形的操作,内容比较简单。

    一、绘制实心矩形

    调用fillRect(x,y,w,h) 方法可以绘制一个实心矩形,参数分别表示x,y轴坐标和矩形的宽、高。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>canvas演示绘制矩形</title>
        <script type="text/javascript">
          window.onload=function(){
           //获取canvas对象的context(绘图上下文)
           var context=document.getElementById('canvas').getContext("2d");
           //绘制实心矩形
           context.fillRect(50,50,200,100);
          }
        </script>
      </head>
      <body>
         <canvas id="canvas" width="300" height="300"></canvas>
      </body>
    </html>
    

    在浏览器中查看效果:

    实心矩形效果

    二、美化矩形

    如图黑乎乎的实心矩形真是不怎么美观,接下来我们尝试美化一下。先让矩形换个颜色,然后添加一个外边框。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>canvas演示绘制矩形</title>
        <script type="text/javascript">
          window.onload=function(){
           //获取canvas对象的context(绘图上下文)
           var context=document.getElementById('canvas').getContext("2d");
           //设置填充色
           context.fillStyle="bisque";
           //设置边框宽度
           context.lineWidth=2;
           //设置边框颜色
           context.strokeStyle="red";
           //绘制实心矩形
           context.fillRect(100,100,300,100);
           //绘制矩形边框(空心矩形)
           context.strokeRect(100,100,300,100);
          }
        </script>
      </head>
      <body>
         <canvas id="canvas" width="400" height="400"></canvas>
      </body>
    </html>
    

    浏览效果:

    美化之后的效果

    PS:恭喜你,又Get了新技能!

    相关文章

      网友评论

        本文标题:初探HTML5——canvas元素(二)

        本文链接:https://www.haomeiwen.com/subject/cmzguxtx.html