信鸽网

js+canvas绘制矩形的方法

  作者：bea

本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><

本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考，具体如下：


运行效果截图如下：



具体代码如下：




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <title>canvas绘制矩形</title>

  <script type="text/javascript" >

  function draw(id) {

    var canvas = document.getElementById("canvas");

    if (canvas) {

      var context = canvas.getContext("2d");

      context.fillStyle = "#DDDDDD";

      context.fillRect(0, 0, 400, 400);

      context.strokeStyle = "black";

      context.fillStyle = "gray";

      context.lineWidth = 5;

      context.fillRect(0,0,200,300);

      context.strokeRect(0,0,200,200);

    } else {

     return;

    }

  }

  function drawBorder(id) {

    var canvas = document.getElementById("canvas2");

    if (canvas) {

      var context = canvas.getContext("2d");

      context.fillStyle = "red";

      context.strokeStyle = "black";

      context.lineWidth = 5;

      context.fillRect(0,0, 300, 200);      

      context.strokeRect(0,0,300,200);

    } else {

    return;

    }

  }

  window.onload = function () {

    draw("canvas");

    drawBorder("canvas2");

  }

  </script>

</head>

<body>

<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>

<hr />

<canvas id="canvas2" width="400"  height="400"></canvas>

</body>

</html>


更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》及《JavaScript运动效果与技巧汇总》


希望本文所述对大家JavaScript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: