初探HTML5——canvas元素（二）

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

初探HTML5——canvas元素（二）
Web之旅—— Canvas初探
HTML5 Canvas
HTML 5 Canvas
HTML5 Canvas 完整测试 - canvas 标签
如何在h5网页添加水印
初探HTML5——canvas元素（一）
初探HTML5——canvas元素（三）
初探HTML5——canvas元素（四）
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>

浏览效果：