如何使用HTML5 canvas绘制一个矩形


本文摘自PHP中文网,作者不言,侵删。

使用HTML5 canvas绘制一个矩形的方法:首先创建相应的HTML示例文件;然后通过Canvas上下文的rect方法实现绘制一个矩形,代码语句如“canvas.getContext('2d');”。

使用HTML5 canvas绘制一个矩形,我们需要用到Canvas上下文的rect()方法。接下来我们就来看看具体的代码实现。

HTML5 canvas

我们来看一个具体的例子

代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title></title>

  <meta charset="utf-8" />

  <script type="text/javascript">

  function draw() {

    var canvas = document.getElementById('SimpleCanvas');

    if ( ! canvas || ! canvas.getContext ) {

      return false;

    }

    var cx = 360;

    var cy = 400;

    var radius = 36;

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

    context.beginPath();

    context.rect(240, 80, 160, 80);

    context.fillStyle = 'peachpuff';

    context.fill();

    context.lineWidth = 2;

    context.strokeStyle = 'coral';

    context.stroke();

  }

  </script>

</head>

<body onload="draw()" style="background-color:#D0D0D0;">

  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>

  <div>Canvas Demo</div>

</body>

</html>

说明:

由document.getElementById()方法获取Canves对象,Canves对象通过调用getContext()方法,用于获取画布上下文的过程是与在画布上绘制时共同处理的。

调用上下文的beginPath()方法来启动路径。用rect()绘制一个矩形。rect的第一个参数和的第二个参数是矩形左上角的X,Y坐标。第三个参数是绘制矩形的宽度,第四个参数是绘制矩形的高度。

使用fill()方法填充内部并使用stroke方法绘制轮廓线。

运行结果

使用Web浏览器执行创建的HTML文件。将显示如下所示的效果。

HTML5 canvas

上述示例的矩形填充了内部,下面我们来看看没有内部填充的矩形

阅读剩余部分

相关阅读 >>

怎样用canvas绘制星空,月亮,大地,添加文字

HTML5中的常见错误用法

HTML5新增加的标签有哪些

canvas中beginpath()和closepath()作用的实例解析

HTML5中返回当前音频/视频的url的属性currentsrc

HTML5 meter标签是什么意思?HTML5 meter度量衡如何改变颜色详解

css实现页面底部固定的方法介绍(附代码)

可替换元素是什么?(附示例)

关于HTML5 history api 的介绍

HTML5怎么外联js文件

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...