• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5之SVG 2D入门4—笔画与填充_html5教程技巧

HTML5之SVG 2D入门4—笔画与填充_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含SVG,2D,笔画,填充等相关知识,匿名希望在学习及工作中可以帮助到您
前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方)。
填充色 - fill属性
这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了。看例子:

nonzero:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的处的走向;计算结果从0开始,每有一个交点处的线段是从左到右的,就加1;每有一个交点处的线段是从右到左的,就减1;这样计算完所有交点后,如果这个计算的结果不等于0,则该点在图形内,需要填充;如果该值等于0,则在图形外,不需要填充。看下面的示例:

evenodd:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的个数,个数为奇数则改点在图形内,需要填充;个数为偶数则点在图形外,不需要填充。看下图的示例:

边框色 - stroke属性
上面的例子中已经用到了stroke属性,这个属性使用设置的值画图形的边框,使用起来也很直接,把颜色值赋给它就可以了。注意:
1. 如果不提供stroke属性,则默认不绘制图形边框。
2. 可以设置边的透明度,就是stroke-opacity,值的范围是0到1。
实际上,边的情况比图形内部稍微复杂一点,因为边除了颜色,还有"形状"需要定义。

线的端点 - stroke-linecap属性

这个属性定义了线段端点的风格,这个属性可以使用butt,square,round三个值。看例子:


这段代码绘制了3条使用不同风格线端点的线,

从左面的图中我们可以很容易看出3中风格的不同。

线的连接 - stroke-linejoin属性
这个属性定义了线段连接处的风格,这个属性可以使用miter,round,bevel三个值。看例子:

从左面的图中我们很容易看到3中风格的不同。

线的虚实 - stroke-dasharray属性

这个属性可以设置线段采用何种虚实线。看例子:

这个属性是设置一些列数字,不过这些数字必须是逗号隔开的。

属性中当然可以包含空格,但是空格不作为分隔符。每个数字

定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。

所以左面的例子中绘制的线是画5单位的实线,留5单位的空格,

再画5单位的实线...这样一直下去。

除了这些常用的属性,还有下列属性可以设置:
stroke-miterlimit:这个和canvas中的一样,它处理什么时候画和不画线连接处的miter效果。
stroke-dashoffset:这个属性设置开始画虚线的位置。

使用CSS展示数据
HTML5强化了DIV+CSS的思想,所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比,只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子:

实用参考:
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/
官方文档:http://www.w3.org/TR/SVG11/

您可能想查找下面的文章:

  • 实例讲解使用SVG制作loading加载动画的方法
  • 使用HTML5进行SVG矢量图形绘制的入门教程
  • HTML5新特性之用SVG绘制微信logo
  • 深入浅析HTML5中的SVG
  • 深入解析HTML5使用SVG图像时的viewBox属性用法
  • html5+svg学习指南之SVG基础知识
  • html5中svg canvas和图片之间相互转化思路代码
  • HTML中使用SVG与SVG预定义形状元素介绍
  • HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
  • HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

相关文章

  • 2018-12-03HTML5的canvas绘制动态时钟,1秒刷新一次canvas,个人觉得有性能的问题,如果不这么做的话,有什么好的方法?
  • 2018-12-03前后端为什么要分开写
  • 2017-08-06HTML块级标签汇总(小篇)
  • 2018-12-03详解HTML5网络拓扑图整合OpenLayers实现GIS地图应用(图)
  • 2018-12-03HTML5 Canvas动画效果图文代码演示
  • 2018-12-03html5的canvas元素使用方法介绍(画矩形、画折线、圆形)_html5教程技巧
  • 2018-12-03HTML5 Canvas 图形组合是如何实现的?附代码
  • 2018-12-03服务器推送事件的详细介绍
  • 2017-08-06HTML5 canvas基本绘图之绘制线段
  • 2018-12-03实践HTML5的CSS3Media Queries的示例代码分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 在react中使用svg的各种方法总结(附代码)
    • HTML5新表单元素的图文实例
    • 作为一个刚入门的前端爱好者,以后立志成为前端攻城狮的我,应该要学习哪些方面的知识?
    • HTML5中的<aside>元素与<article>元素 实例详解
    • 在上海培训前端,达内,火星,传智,千锋综合考虑哪家好一点?有知道的大神吗?谢谢
    • 针对HTML5的Web Worker使用攻略
    • HTML5 canvas基本绘图之文字渲染
    • 多年前对 XHTML 和 HTML5 的预测为什么错的这么离谱?
    • 详细介绍WebSocket API HTML5规范翻译
    • Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有