html 里怎么画一个矩形?

html 里怎么画一个矩形?,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>svg demo</title>

</head>

<body>

<svg width="500" height="500" style="background-color: #398439" version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100" rx="20" ry="20" style="fill:yellowstroke-width:3stroke:red"/>

</svg>

</body>

</html>

rect标签参数解析:

rect 元素的 width 和 height 属性可定义矩形的高度和宽度,现在给矩形的宽为300,高为100

style 属性用来定义 CSS 属性

CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)

CSS 的 stroke-width 属性定义矩形边框的宽度

CSS 的 stroke 属性定义矩形边框的颜色

rx和ry为圆角,不设置时默认直角

让我们来看一下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)

}

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8355243.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存