<!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为圆角，不设置时默认直角
Cavas的英文解释是画布，使用这个Html5的Canvas标签可以创建画布，结合JavaScript可以画出很多图形，我们先以画一个蓝色矩形为例，说明一下这个标签的使用方法，首先需要建立一个HTML5的网页，方法是：
进入DW后，选择：文件-->新建
在d出的对话框中选择文件类型为Html5
选择“创建”后，即会形成一个空白网页，选择“文件”--"保存“
起名为：juxing
这个名字可以依据自己的喜好起，但最好名字与网页内容相关，以后好找，另外一个需要注意的是，最好不用汉字。
我们将视图切换为”代码“视图
并将标题改为”画出矩形“
标题也可以依据自己的喜好进行设定，并不影响网页的运行。
Html是标记型语言，各种功能都需要在对应的标签里面才可以，所以我们首先需要添加标签。
我们只需输入<c，就会看到提示列表里出现我们所需要的标签canvas，按下回车键，即可完成输入。
之后，我们每一次按下空格、或输入相关字母，都会有提示列表，我们只需选择所需的项目，按下回车即可，并不需要完整输入字串，可以避免输入时的拼写错误。在本例中，只有引号内的”mycanvas“是需要完整输入的，其他部分的关键字都可以通过提示列表进行输入。
命令为：<canvas id="mycanvas" width="600" height="400"></canvas>
只有Canvas标记是不能直接画出图来的，需要配合JavaScript语言，首先需要写出对应的程序标记。
Html语言中的标记都是成对出现的，我们为了避免错误，可以先将标记的起始、标记的结束写好
写好前后标记后，我们就可以在标记中使用JavaScript语言，调用Canvas标记，画出我们所需要图形了，方法是：
var canvas=document.getElementById('mycavas')
将变量canvas，赋值为我们之前在html中定义的画布”mycanvas，以方便JavaScript调用
var ctxt=canvas.getContext('2d')
将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象，使用这个对象就可以绘图了
使用fillStyle方法设置颜色，是十六进制表示的三原色分量范围是从“#000000”至“FFFFFF”
ctx.fillStyle='#0066cc'
我们将颜色设置为一种蓝色，这个颜色也可以随自己喜好 更改。
ctx.fillRect(50,50,400,200)
填充的起始位置设置为（50，50），矩形宽度为400，高度为200
选择在浏览器中浏览后，即可看到我们所需要的矩形
HTML没有实现矩形的标签，可以借助CSS来完成。使用CSS3的border-radius属性，即可完成圆角矩形。border-radius属性的具体用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
默认值：0
继承性：no
版本：CSS3
JavaScript 语法：object.style.borderRadius="5px"
语法
border-radius: 1-4 length|% / 1-4 length|%
（注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。）
值 描述 测试
length定义圆角的形状。测试
%以百分比定义圆角的形状。测试
例子 1
border-radius:2em
等价于：
border-top-left-radius:2em
border-top-right-radius:2em
border-bottom-right-radius:2em
border-bottom-left-radius:2em
例子 2
border-radius: 2em 1em 4em / 0.5em 3em
等价于：
border-top-left-radius: 2em 0.5em
border-top-right-radius: 1em 3em
border-bottom-right-radius: 4em 0.5em
border-bottom-left-radius: 1em 3em
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）