Canvas 绘制矩形

在上一章节 Canvas 坐标体系 我们不仅学习了 Canvas 的坐标体系,还是学习了如何绘制一个矩形

矩形是所有形状的始祖之一,比如

  1. 把矩形的宽高设置为一样,就是正方形
  2. 把矩形倾斜一点,就是平行四边形

要绘制一个矩形,有两种办法

  1. 确定起始坐标 (x1,y1) 和矩形斜角坐标 (x2,y2),然后确定剩下的坐标,最后用直线连起来
  2. 取定起始坐标 (x1,y1) 和长宽 (width,height),然后画出来即可

第一种我们后面学习了如何画线再讲,我们先来学习第二种

渲染上下文 ( ctx ) 提供了 strokeRect() 方法用来绘制一个矩形

strokeRect(x, y, width, height)
参数 说明
x 起始点 x 坐标
y 起始点 y 坐标
width 矩形长度
height 矩形高度

例如下面的代码在 (50,50) 开始绘制一个 200 x 50 的矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeRect(50,50,200,50);
</script>

运行结果如下



我们可以重复使用 strokeRect() 方法绘制多个矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-2" width="400" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.strokeRect(0,0,200,200);
ctx.strokeRect(0,0,100,100);
ctx.strokeRect(50,50,100,100);
ctx.strokeRect(250,250,100,100);
</script>

运行结果如下



绘图顺序

从上面这张图中可以看出,把图画在画板上遵从的是现实生活中绘画的原则:后来画的会覆盖之前画的

上图看的不明显,等以后我们学了如何使用不同的画笔(颜色)之后你会看的更明白

超出大小

现实生活中绘画的时候肯定不会超出画板的范围,当然,canvas 中也不会,所以上面的范例中 最后那个矩形只显示了一点点

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.