HTML5Canvas中绘制矩形的方法

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

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了靖江免费建站欢迎大家使用!

在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://pwwzsj.com/article/giosci.html