H5中canvas和svg绘图方式介绍

Stella981
• 阅读 942

在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以“.svg”为后缀的文件在浏览器中打开显示,也支持建立svg标签直接嵌入在网页中显示,还可以通过将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在图形上还有一种按照路径来画图形的标签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对于文字也有不同的效果体现,svg的text标签支持渐变填充,也支持文字拾取曲线排列文字,需要预先定义渐变填充在中,当文字拾取路径排列是也需要在中预先定义。而text也有自己的一些属性:x/y(X轴/Y轴起始点坐标)、dx/dy(X轴/Y轴偏移位置的坐标)、rotate(旋转偏移的角度)、textLength(元素的长度,会影响输出的宽度)、transform(文字的变形效果,类似css中的transform);代码如下:

<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

<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"/>

www.weisim3.com 22.11.2011 - Html5 SVG

svg可以直接支持动画和鼠标触发事件,也支持JavaScript脚本响应时间,接下来会为大家介绍一下svg的鼠标事件和动画;click事件,在SVG中触发click事件,attributeName是类型这里fill是指填充,to="red"是点击之后填充为红色,attributeName支持visibility、opacity、width等属性。动画,这里动画from="0,260"为平面坐标点,x轴为0,y轴为260;to="180,100"则是动画移动到"180,100"位置;dur="5s"为帧速。动画为自由变换如图形旋转、缩放主要用此属性;代码如下:

<animate attributeName="width" dur="5s" from="10px" to="20px"

accumulate="sum" additive="sum" repeatCount="10" begin="click" />

<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 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"/>

<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"/>

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Easter79 Easter79
3年前
SVG
1.SVG  图表,动效ScalableVectorGraphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。SVG面向图形,HTML面向文本。2.SVG和Canvas的区别  Canvas做图是在画布上通过js来控制动态  SVG是通过标签来实现的  SVG放大之后不会失真,Canvas放大后会失
Easter79 Easter79
3年前
SVG跟随父级DIV自适应
后台返回过来的是这样的SVG标签<svgwidth"100%"height"100%"version"1.1"xmlns"http://www.w3.org/2000/svg"<gtransform"translate(00)"
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
SVG
1.SVG  图表,动效ScalableVectorGraphics 可缩放矢量图形 是一种用来描述二维矢量图形的XML标记语言。SVG面向图形,HTML面向文本。2.SVG和Canvas的区别  Canvas做图是在画布上通过js来控制动态  SVG是通过标签来实现的  SVG放大之后不会失真,Canvas放大后会失
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这