H5中canvas和svg绘图方式介绍
Posted pycsharpthon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5中canvas和svg绘图方式介绍相关的知识，希望对你有一定的参考价值。
在html5中包括了两种绘图方式，canvas和svg（矢量呈现），而与canvas不同的是，svg是一种XML标记语言，它既可以单独保存以“.svg”为后缀的文件在浏览器中打开显示，也支持建立svg标签直接嵌入在网页中显示，还可以通过<embed src="文件.svg" name="name自命" type="image/svg+xml" height="300" width="450">将SVG嵌入到页面中，和Canvas一样也可以响应脚本事件操作和控制。
svg的形状shapes：rect/矩形(方形) 、circle/圆形、ellipse/椭圆、line/线、polyline/多边交叉线和polygone/多边形可以使用，当然还有image；
其中，（1）在rect中有如下属性：x/y（矩形左上角坐标），width/height（矩形宽高），rx/ry（矩形的角弧度；最大值为宽高的一半，而且当矩形为正方形切最大值时图形为圆形），fill（图形填充色），stroke/stroke-width（图形边框/边框宽度；默认为1px）；（2）在circle中则有如下属性：cx/cy（圆形圆点坐标）、r（圆形半径）、fill、stroke/stroke-width；（3）在ellipse中则有如下属性：cx/cy、rx/ry（椭圆X轴/Y轴的半径）、fill、stroke/stroke-width；（4）在line中则有如下属性：stroke/stroke-width（线的颜色/宽度）、x1/y1(直线起点坐标)、x2/y2(直线终点坐标)；（5）在polyline中则有如下属性：stroke/stroke-width（线的颜色/宽度）、points（x1,y1 x2,y2 x3,y3）(起点终点以及各个转折点的坐标)；（6）在polygon中有如下属性stroke/stroke-width（线的颜色/宽度）、points（x1,y1 x2,y2 x3,y3）(起点终点以及各个转折角的坐标)；
代码如下：
<svg width="3000" height="2500" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="50" width="60" height="60" fill="green"/>
<rect x="70" y="5" rx="30" ry="30" stroke="blue" width="60" height="60" fill="red"/>
<circle cx="165" cy="35" r="30" fill="orange" stroke="blue"/>
<ellipse cx="230" cy="35" rx="30" ry="20" fill="blue"/>
<line y1="222" x1="25" y2="130" x2="100" stroke-width="5" stroke="#ff0000" fill="none"/>
<polygon points="290,100 350,210 270,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
<polyline stroke-width="6" fill="none" stroke="#3f7f00" points="121,193 192,284 121,284 192,193 "/>
<image xlink:href="http://4493bz.1985t.com/uploads/allimg/150127/4-15012G52133.jpg" x="360" y="30" width="100" height="100" />
</svg>
然后，svg在图形上还有一种按照路径来画图形的标签path，其实path标签是用来定义路径的，标签里有个d="";的属性，里面的值为路径坐标；以下命令可用于路径数据：M = moveto，L = lineto，H = horizontal lineto，V = vertical lineto，C = curveto，S = smooth curveto，Q = quadratic Belzier curve，T = smooth quadratic Belzier curveto，A = elliptical Arc，Z = closepath；（这些命令均允许大小写，大写表示绝对定位，小写表示相对定位）；例如：
<svg xmlns=‘http://www.w3.org/1999/svg‘ version=‘‘>
<path d="m0,0,10,20,30,20,50,50,200,10z" stroke-width="5" stroke="#000000" fill="#ff7f00" />
<path d="m263,149 l-9,76 l82,-48 l-123,-13 l50,-15 z" stroke-width="5" stroke="#000000" fill="#ff7f00"/>
</svg>
另外，svg对于文字也有不同的效果体现，svg的text标签支持渐变填充，也支持文字拾取曲线排列文字，需要预先定义渐变填充在<defs></defs>中，当文字拾取路径排列是也需要在<defs></defs>中预先定义。而text也有自己的一些属性：x/y(X轴/Y轴起始点坐标)、dx/dy(X轴/Y轴偏移位置的坐标)、rotate（旋转偏移的角度）、textLength（元素的长度，会影响输出的宽度）、transform（文字的变形效果，类似css中的transform）；代码如下：
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_8">
<stop stop-color="#ff0000" offset="0"/>
<stop stop-color="#ffff00" offset="1"/>
</linearGradient>
</defs>
<text font-weight="bold" font-style="normal" xml:space="preserve"
text-anchor="middle" font-family="Arial Black" font-size="24"
id="svg_7" y="53" x="107" stroke-width="0" stroke="#000000"
fill="url(#svg_8)">weisim3.com</text>
<defs>
<path d="m220.98885,39.69102c84.91158,149.91641 241.80937,-74.29949 260.99889,5.65374"
fill="black" transform="rotate(-0.474251, 351.488, 60.1133)"
id="fontPath"/>
</defs>
<text fill="url(#svg_8)">
<textPath xlink:href="#fontPath">
www.weisim3.com 22.11.2011 - Html5 SVG
</textPath>
</text>
</svg>
svg可以直接支持动画和鼠标触发事件，也支持javascript脚本响应时间，接下来会为大家介绍一下svg的鼠标事件和动画；click事件<set attributeName="fill" to="red" begin="click"/>，在SVG中触发click事件，attributeName是类型这里fill是指填充，to="red"是点击之后填充为红色，attributeName支持visibility、opacity、width等属性。动画<animateMotion from="0,260" to="180,100" dur="5s" fill="freeze"/>，这里动画from="0,260"为平面坐标点，x轴为0，y轴为260；to="180,100"则是动画移动到"180,100"位置；dur="5s"为帧速。动画<animateTransform>为自由变换如图形旋转、缩放主要用此属性；代码如下：
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="35" r="30" fill="green">
<set attributeName="stroke" to="red" begin="click"/>
</circle>
<rect x="100" y="10" width="40" height="50" fill="orange">
<animate attributeName="width" dur="5s" from="10px" to="20px"
accumulate="sum" additive="sum" repeatCount="10" begin="click" />
</rect>
<rect fill="orange" stroke="red" stroke-width="5px"
x="0px" y="0px" width="115px" height="115px">
<animateMotion from="0,260" to="180,100"
dur="5s" fill="freeze"/>
</rect>
</svg>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
<rect fill="#AFBCC7" stroke="blue" stroke-width="5px" x="200px"
y="100px" width="60px" height="60px">
<animateTransform
attributeType="XML"
attributeName="transform"
type="rotate"
from="0,150,150" to="360,150,150"
begin="0s" dur="5s"
repeatCount="indefinite"/>
</rect>
<circle fill="#c5ff86" stroke="#38521d" stroke-width="5px"
cy="37" cx="148" r="30" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="scale"
from="0" to="1"
dur="5s"
fill="freeze"/>
</circle>
</svg>
以上是关于H5中canvas和svg绘图方式介绍的主要内容，如果未能解决你的问题，请参考以下文章
浏览器端绘图技术SVG VML Canvas WebGL介绍