如何用canvas绘制矩形?canvas画矩形的两种方法介绍


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

canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以,如何用canvas绘制一个矩形呢?接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容,若是有需要的话可以看看。

我们需要知道的是在canvas中与矩形相关的方法是rect(),使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

rect()方法能接收 4 个参数:矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。

首先,我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html> 

<html

<head

<meta charset="utf-8" /> 

<title>用canvas画矩形</title

<style

</style

</head

<body

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

<script type="text/javascript"

  function draw(id){ 

      var canvas = document.getElementById(id); 

      var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象 

      context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式             

      context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形     

 

 draw("canvas"); 

</script

</body

</html>

canvas画有填充矩形的效果如下:

2345截图20180917100659.png

然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>用canvas画矩形</title>

<style>

</style>

</head>

<body>

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

<script type="text/javascript">

  function draw(id){

      var canvas = document.getElementById(id);

      var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象

      context.strokeStyle = "pink";  //图形边框的填充颜色

      context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形:    

      context.strokeRect(50,50,180,120);  //绘制矩形(无填充)

      context.strokeRect(110,110,180,120);     

 }

 draw("canvas");

</script>

</body>

</html>

canvas画无填充矩形的效果如下:

2345截图20180917101052.png

最后本篇文章到这里就结束了,关于canvas更多的相关知识可以参考HTML5开发手册。

以上就是如何用canvas绘制矩形?canvas画矩形的两种方法介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何利用html5 canvas旋转图片?(实例演示)

html5 canvas基本绘图之绘制线条

关于html5 canvas的事件处理

用javascript将canvas内容转化成图片的方法详解

canvas中使用clip()函数裁剪方法

html5中canvas与svg有什么区别

html5 canvas粒子形成下雪背景的效果

canvas怎么使用

canvas实现简单的下雪效果(附代码)

如何用html5中的canvas实现渐变文字的效果

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




打赏

取消

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

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

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

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

评论

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