HTML5Canvas中绘制矩形的方法-创新互联

本篇内容介绍了“HTML5 Canvas中绘制矩形的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联-专业网站定制、快速模板网站建设、高性价比涞源网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式涞源网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖涞源地区。费用合理售后完善,10余年实体公司更值得信赖。

在Canvas中,绘制矩形有三种方法:填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然,我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的实心矩形。
2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。
3.clearRect(x,y,width,height)。清除从(x,y)开始,宽度为width,高度为height的矩形区域,使之完全透明。

在调用上述方法绘制Canvas之前,我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子:



代码如下:


context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";



在下面的例子中,填充色设定为黑色,而描边色则设定为紫色:



代码如下:


function drawScreen() {
 context.fillStyle = "#000000";
 context.strokeStyle = "#ff00ff";
 context.lineWidth = 2;
 context.fillRect(10, 10, 40, 40);
 context.strokeRect(0, 0, 60, 60);
 context.clearRect(20, 20, 20, 20);
}



代码执行结果如下图所示:

HTML5 Canvas中绘制矩形的方法

“HTML5 Canvas中绘制矩形的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


文章名称:HTML5Canvas中绘制矩形的方法-创新互联
文章来源:http://myzitong.com/article/coepep.html