码迷,mamicode.com
首页 > 其他好文 > 详细

H5中canvas和svg绘图方式介绍

时间:2018-09-28 10:59:58      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:绝对定位   nsf   响应   orm   标记语言   www   html   类型   size   

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绘图方式介绍

标签:绝对定位   nsf   响应   orm   标记语言   www   html   类型   size   

原文地址:https://www.cnblogs.com/pycsharpthon/p/9716724.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!