html5 svg
2016-03-29 15:26
465 查看
html5 svg
高斯模糊 线性渐变
<html > <body> <p>canvas 用js 绘画,是整幅画布,适合游戏 svg可放大,支持dom 操作,js事件 线性渐变、高斯模糊、动画实例</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" style="border:1px solid red;" > <!--圆形 cx cy 圆心 stroke 线条颜色 --> <circle cx="32" cy="32" r="30" stroke="black" stroke-width="1" fill="red" fill-opacity="0.5" /> <!--矩形--> <rect x="80" y="10" width="100" height="100" stroke="black" stroke-width="2" fill="red" stroke-opacity="0.5"/> <!--矩形 rx ry 圆角大小--> <rect x="200" y="10" rx="20" ry="20" width="100" height="100" stroke="black" stroke-width="2" fill="red" stroke-opacity="0.5"/> <!--椭圆 cx cy 圆点 rx水平半径 ry 垂直半径--> <ellipse cx="100" cy="160" rx="80" ry="40" style="fill:#abcdef;stroke:#ccc;stroke-width:2"/> <!--线条 x1 y1 线条开始 x2 y2 线条结束--> <line x1="190" y1="170" x2="190" y2="150" style="stroke: red;stroke-width:2"/> <!--多边形 至少3条边 points 指各个顶点的坐标--> <polygon points="220,120 300,210 170,250" style="stroke:green;stroke-width:1;fill:green;"/> <!--只划线条--> <polyline points="10,200 10,220 20,220 20,240 40,240 40,260"style="fill:white;stroke:red;stroke-width:2"/> <!-- 它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。 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 编辑器来创建复杂的图形。 --> <path d="M50 250 L70 290 L90 300 Z" /> </svg> </body> </html>
高斯模糊 线性渐变
<html > <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" style="border:1px solid red;" > <!--高斯模糊 stdDeviation 模糊程度--> <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <ellipse cx="70" cy="40" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/> <!--线性渐变--> <defs> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:red;stop-opacity:1"/> <stop offset="100%" style="stop-color:yellow;stop-opacity:1"/> </linearGradient> </defs> <ellipse cx="230" cy="50" rx="65" ry="35"style="fill:url(#orange_red)"/> <!--放射性渐变--> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="50" cy="120" rx="40" ry="30"style="fill:url(#grey_blue)"/> </svg> </body> </html>
相关文章推荐
- Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)
- Html5之高级-3 HTML5表单验证(验证属性、验证状态)
- html5重要元素
- html5重要元素
- Html5之高级-2 HTML5表单属性(属性介绍、属性详解)
- html5移动web开发实战必读书记
- Html5之高级-1 HTML5表单元素(表单简介、input类型、新表单元素)
- HTML5表单属性(三)
- HTML5实现图片压缩上传功能
- 节日来了发个HTML5红包
- 使用 HTML5 WebSocket 构建实时 Web 应用
- 第六次HTML5
- HTML5与CSS3基础(五)
- HTML5 WebSockets 总结
- 关于h5游戏随笔
- html5视频问题
- h5 canvas(toDataURL)实现将图片与文字结合
- 我的h5最佳实践
- Html5 web worker 的总结
- HTML5来了,7个混合式移动开发框架