上面的示例基础上调整一下：

function drawScreen () { ctx.lineWidth = 10; ctx.fillStyle = "#f36"; ctx.strokeStyle = '#f36'; ctx.lineJoin = "bevel"; ctx.strokeRect(10,10,200,200); ctx.fillRect(15, 15,190,190); ctx.lineJoin = "round"; ctx.strokeRect(250,10,200,200); ctx.fillRect(255, 15,190,190); }

改变矩形的样式

不管是使用Canvas中的路径方法还是自带绘制矩形的API，都可以通过 fillStyle 和 strokeStyle 来给矩形设置样式，比如填充颜色和边框颜色。

清除矩形

在Canvas中有一个 clearRect() 可以指定矩形区域内（以 点 (x, y) 为起点，范围是 (width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法：

ctx.clearRect(x, y, width, height);

比如有时候需要清除画布，可以这样使用：

ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); 通过JS绘制矩形

前面我们学习的是通过Canvas的API来绘制矩形。很多时候，我们希望在Canvas画布上直接使用鼠标就拖拉就能绘制出矩形。那接下来，用自己蹩脚的javascript来实现这功能。

第一步：监听画布上的鼠标事件

可以通过 addEventListener() 对画布上的鼠标事件进行监听，比如 mousedown 、 mouseup 和 mousemove 等：

myCanvas.addEventListener('mousedown', mouseDown, false); myCanvas.addEventListener('mouseup', mouseUp, false); myCanvas.addEventListener('mousemove', mouseMove, false);

在写 mouseDown 、 mouseUp 和 mouseMove 函数的时候，先声明两变量：

var rect = {}, drag = false; 第二步：写mouseDown()函数

mouseDown() 函数是监听鼠标在画布上按下时需要做的事情：

function mouseDown(e) { rect.startX = e.pageX - this.offsetLeft; rect.startY = e.pageY - this.offsetTop; drag = true; }

当鼠标按下时，函数 mouseDown() 通过 e.pageX 和 e.pageY 找到 e 的位置，然后减去距离Canvas画布左边和顶部的距离。最后设置拖动 drag 为 true 。

第三步：写mouseUp()函数 function mouseUp(){ drag = false; }

这个函数很简单，当用户释放鼠标时，拖动 drag 设回 false 。表示鼠标不能拖动。

第四步：写mouseMove()函数 function mouseMove(e) { if (drag) { rect.w = (e.pageX - this.offsetLeft) - rect.startX; rect.h = (e.pageY - this.offsetTop) - rect.startY ; ctx.clearRect(0,0,myCanvas.width,myCanvas.height); drawRect("fill"); } }

mouseMove() 函数才是关键的一步。在 mouseMove() 函数中首先检测 drag ，如果是 true 意味着想要绘制一个矩形，如果是 false 只是意味着用户只在画布上移动鼠标，并不想画矩形。如果 drag 是 true ，通过鼠标跟随位置计算出矩形的宽度和高度。如果要做到这一点，我们需要减去鼠标当前的位置。这样得到想要绘制矩形的 width 和 height ，但在绘制之前，需要通过 clearRect() 方法，将Cavans画布清除干净。然后再调用绘制矩形的函数 drawRect() 。

第五步：绘制矩形 function drawRect(style){ if (style==="fill"){ ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); } if (style==="stroke"){ ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h); } }

drawRect() 函数是真正绘制矩形的，在这个函数中传了一个 style 参数。如果是 fill 绘制一个填充矩形，如果是 stroke 将绘制一个边框矩形。

效果出来了。你可以将传的参数 "fill" 换成'"stroke"'就可以绘制一个只有边框的矩形。

总结

本文介绍了在Canvas中绘制矩形的几种方法：

使用Canvas中的路径 moveTo() 、 lineTo() 配合 fill() 和 stroke() 绘制矩形 使用Canvas中的 rect(x,y,width,heihgt) 配合 fill() 和 stroke() 绘制矩形 使用 fillRect(x,y,width,height) 绘制一个填充的矩形 使用 strokeRect(x,y,width,height) 绘制一个边框矩形

另外还可以通过 clearRect(x,y,width,height) 清除画布。在Canvas中除了矩形之外，还有圆形之类的。在下一节中，我们来学习怎么在Canvas绘制圆。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对html5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 矩形、CSS3、CSS、HTML、、HTML5、Java、核心技术、变量、

分页：12

转载请注明
本文标题：Canvas学习：绘制矩形
本站链接：
分享请点击：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

   注册     登录