即
scalable
vector
graphics，是一种用来绘制矢量图的
html5
使用svg之前先将标签加入到html
body中。就像其他的html标签一样，你可以为svg标签为之添加id属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。svg标签跟其它的html标签有通用的属性。你可以用height="100px"
width="200px"
为其添加高度和宽度。
现在就将svg元素加入到我们html代码中，svg提供很多绘图形状，例如线条、圆、多边形等。
svg线条：
svg线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
svg画圆：
svg提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为mycircle。为了定义圆的中心以及半径，使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219e3e"为圆填充颜色。同样你可以用stroke="#17301d"
stroke-width="2"定义圆周线条颜色和宽度。
svg矩形:
同样的使用标签来画矩形，我们同样设置了
id
属性
“myrectangle”
,用
width="300"
height="100"
定义高宽，使用
fills
属性定义填充颜色。用
strock
定义边框。还有一点需要注意，我用
fill-opacity="0.5"
stroke-opacity="0.5"
为
stroke
和
filling
都添加了透明度。
svg椭圆：
我们同样是用标签来绘制椭圆。设置其
id="myellipse"
，给定起中心坐标
cx="120"cy="60"，长轴短轴半径
rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3f5208stroke:blackstroke-width:3"。
svg多边形：
我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如
points="10,10
75,150
150,60"
，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用
style="fill:#63bcf7stroke:blackstroke-width:3"
定义多边形填充颜色、边框以及边框宽度。
HTML5 <canvas>标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
正如上面所说，你需要制作无数的规则图形组合到一起变成不规则图形。
*** 作可以说是相当复杂。建议你可以用HYPE3实验下，如果你想做HTML5动画的话。
如果你只是想研究，请看：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
canvas画出来的图是位图做个测试：用canvas画一个简单的图像，然后把网页放大，你会看到canvas里面的图形和文字会失真（会看到一个一个的点变大）
<html>
<head>
<title>
Canvas Example
</title>
<script type="text/javascript">
function loader() {
var canvas = document.getElementById('canvas')
var canvas1 = canvas.getContext('2d')
// Rectangles
canvas1.fillStyle = "rgba(0, 0, 200, 1)"
canvas1.fillRect(30, 30, 75, 70)
canvas1.font = 'italic 40px sans-serif'
canvas1.strokeText("Hello!", 50, 50)
}
</script>
</head>
<body onload="loader()">
<h1>Canvas Example</h1>
<canvas id="canvas" width="300" height="300">
</canvas>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）