Canvas 按路径绘制矩形

上一章节中我们学习了如何按照路径绘制一个图形,其实还可以按照路径绘制一个矩形

比如下面的代码就绘制了一个以 (50,50) 为起始坐标,宽高为 200 x 80 的绿色边框矩形

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

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "green"
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(50+200,50);
ctx.lineTo(50+200,50+80);
ctx.lineTo(50,50+80);
ctx.closePath();
ctx.stroke();
</script>

运行结果如下

请特别注意我们各个坐标点的计算过程

rect() 方法

因为绘制矩形这么常用,所以 渲染上下文 还特意提供了一个 rect() 方法用于绘制矩形

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

rect() 方法和 strokeRect() 方法类似,不同之处在于 rect() 方法要调用 stroke() 方法才会真正的把矩形绘制到画板上

例如下面的代码使用 rect() 方法绘制了一个和上面一模一样的矩形

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

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

运行结果如下

Canvas 基础教程

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

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

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