初探HTML5——canvas元素（二）

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

一、绘制实心矩形

调用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元素（二）

一、绘制实心矩形

二、美化矩形

推荐阅读更多精彩内容