HTML5 Canvas中绘制矩形

绘制矩形

上一节，我们使用lineTo()方法绘制一个封闭的矩形。其实，canvas的API提供了rect()方法可以绘制矩形。rect()方法是路径方法，它会把指定的矩形添加到当前路径的子路径中。它只添加路径，绘制图形还是由stroke()或fill()方法完成。

除了rect()方法之外，Canvas 的API还提供了三个直接处理矩形的方法：

fillRect(x, y, width, height)
strokeRect(x, y, width, height)
clearRect (x, y, width, height)

这三个方法用来处理以(x, y)为左上角、宽度为width、高度为height的矩形区域，它们直接用来处理画布上内容的，并且都不是路径方法，都不影响当前路径及路径中的当前点。

fillRect()方法填充矩形区域；strokeRect()方法勾勒矩形边框；clearRect()方法清除矩形区域内的所有内容，并将它恢复到初始状态，即透明色。调用clearRect()方法时，可以把widht和height设置成跟画布相同的尺寸，用来清除整个画布上的内容。

以下代码将使用strokeRect()方法来绘制左侧的矩形，使用fillRect ()方法绘制右侧的矩形，当用户点击“清除画布”按钮时，调用clearRect()方法清除整个画布的内容。代码如下：

<button id="clearMe">清除画布</button>
<canvas id="canvas" width="400" height="140"></canvas>

function drawRect() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var clearMe = document.getElementById("clearMe");
context.strokeRect(50, 20, 120, 100);
context.fillRect(220, 20, 120, 100);
clearMe.onclick = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
}

运行结果如图 4‑6 所示：

图4-6 绘制矩形

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在GitHub 上开源。

HTML5 Canvas中绘制矩形相关推荐

html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
html如何画出四个圆圈,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
HTML5 Canvas中绘制贝塞尔曲线
绘制贝塞尔曲线贝塞尔曲线于1959年,由法国物理学家与数学家Paul de Casteljau所发明,于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,并用于汽车的车 ...
HTML5 Canvas中绘制圆弧
绘制圆弧圆弧被定义为假想的圆周上任意两点之间的部分.Canvas的API提供了两个绘制圆弧的方法:arc()和arcTo()方法. arc()方法使用arc()方法绘制圆弧时,假想的圆由圆心和半径 ...
[HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形代码: <script>var can ...
HTML5 Canvas中绘制文本
绘制文本画布中不仅可以绘制图形,还可以绘制文本.绘制文本,既可以使用填充方法,也可以使用勾勒方法: fillText(text, x, y, [maxWidth]) strokeText(text, ...

HTML5 Canvas中绘制矩形

绘制矩形

HTML5 Canvas中绘制矩形相关推荐

最新文章

热门文章