> 脚本语言 > >

canvas学习总结（6）：绘制矩形 2017-07-31 17:26　出处：清屏网　人气：　

在第三章中我们提高Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。

立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。

Canvas的API提供了如下三个方法，分别用于矩形的清除，描边与填充

clearRect(x, y, w, h): 清除指定区域，使其为全透明

strokeRect(x, y, w, h): 绘制一个描边的矩形

fillRect(x, y, w, h): 绘制一个填充的矩形

我们先来看看基于路径的绘制矩形的方法

moveTo(), lineTo() function drawRect(){ 　　// 描边矩形 　　ctx.beginPath(); 　　ctx.moveTo(20, 20); 　　ctx.lineTo(200, 20); 　　ctx.lineTo(200, 200); 　　ctx.lineTo(200, 200); 　　ctx.lineTo(20, 200); 　　ctx.lineTo(20, 20); 　　ctx.stroke(); 　　//填充矩形 　　ctx.beginPath(); 　　ctx.moveTo(220, 20); 　　ctx.lineTo(400, 20); 　　ctx.lineTo(400, 200); 　　ctx.lineTo(220, 200); 　　ctx.lineTo(220, 200); 　　ctx.lineTo(220, 20); 　　ctx.fill(); }

rect()绘制矩形

rect(x, y, w, h):绘制一个封闭的矩形路径

参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高

function drawRect(){ 　　ctx.beginPath(); 　　ctx.rect(20, 20, 180, 180); 　　ctx.stroke(); 　　 　　ctx.beginPath(); 　　ctx.rect(220, 20, 180, 180); 　　ctx.fill(); }

立即绘图函数

strokeRect(x, y, w, h):  绘制一个描边的矩形

参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高

function drawRect(){ 　　ctx.strokeRect(20, 20, 180, 180); }

fillRect(x, y, w, h): 绘制一个填充的矩形

参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高

function drawRect(){ ctx.fillRect(20, 20, 180, 180); }

clearRect(x, y, w, h) : 清除指定区域内的所有像素

参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高

清除画布的方法

ctx.clearRect(0, 0, canvas.width, canvas.height); 绘制圆角矩形

在第五章中我们介绍了lineJoin属性 用来设置线的连接点的样式，因此我们可以绘制圆角矩形

function drawRect(){ 　　ctx.lineWidth = 13; 　　ctx.lineJoin = 'round'; 　　ctx.strokeRect(20, 20, 180, 180); }

当然我们还可以使用lineJoin的其他属性值绘制不同方式的矩形。我们可以自己测试一下。

总结：

路径绘制矩形

moveTo(), lineTo()绘制路径,stroke()与fill()进行描边与填充

rect(x, y, w, h)顺时针绘制路径,stroke()与fill()进行描边与填充

立即绘制矩形

strokeRect(x, y, w, h): 绘制一个描边的矩形

fillRect(x, y, w, h): 绘制一个填充的矩形

分享给小伙伴们：

本文标签： canvas/">canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻