浙江龙网

  1. 首页 > 生活百科 > >

前端图形:SVG与Canvas( 三 )

生活百科


文章插图
1.3、svg工具/资源/库矢量图标资源

  • Iconfont-阿里巴巴矢量图标库，功能很强大 ， 及其提供丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能 。应该就这个就够了！
  • flaticon，国外的矢量图标库
SVG工具路径< path>可以绘制任意的图形，直接编码是比较困难的 ， 特别是C贝塞尔曲线 。所以一般都是用专业工具来绘制&lt; svg&gt;图形的，也有在线工具 。
  • 专业工具AI：Adobe Illustrator
  • 在线SVG编辑器，Method Draw
  • SVGator，一个在线SVG动画制作工具，导入SVG文件，进行可视化的动画制作 。
动画库
  • 第三方库GSAP，来自GreenSock，可以更简单的实现更丰富的动画效果，不光支持SVG ， 包括页面中任意可以通过JS访问的元素、属性 ， 都可以实现动画 。
  • anime.js ， 功能强大，非常轻量，压缩后大小9K 。
  • SVG动画库：mo.js、SVG.js
02、< canvas>基础< canvas>只是一块平平无奇的画布而已（在HTML中就一个<canvas>元素），提供了一点点API，由JS进行绘制各种图形 。2D的canvas绘制和<SVG>挺像，都是一些线、矩形、圆、path路径数据 。这里就先简单了解一下，<canvas>功能是很强大的，很多可视化图表都是基于<canvas>实现的 。
基本特点：
  • 双标签，必须包含闭合标签 。标签内可以放提示文字 ， 当浏览器不支持<canvas>会显示 。
  • 坐标系以左上角为中心点 ， 和SVG一样 。

前端图形:SVG与Canvas

文章插图
  • MDN：Canvas 教程
2.1、canvas APIcanvas 属性/方法描述height、width元素高度、宽度：<canvas width="400" height="400"></canvas>getContext(contextType)获取用于绘制的渲染上下文，contextType： "2d"：CanvasRenderingContext2D 二维渲染上下文 "webgl"： WebGLRenderingContext 三维渲染上下文，OpenGL ES 2.0 "webgl2"：WebGL2RenderingContext 三维渲染上下文，OpenGL ES 3.0CanvasRenderingContext2DfillStyle填充（内部）颜色 ctx.fillStyle='rgba(250,0,0,0.6)'strokeStyle画笔（边框）颜色 ctx.strokeStyle='red'，同上 ， 支持color、渐变色画刷、图片画刷font字体设置 ctx.font = "bold 48px serif"lineWidth线宽 ctx.lineWidth = 15;toDataURL(type, quality)可以将canvas绘制的图形转换为Data URI 格式的图像 ， 从而导出为位图文件基础图形绘制fillRect(x, y, width, height)填充一个矩形strokeRect(x, y, width, height)绘制一个矩形框clearRect(x, y, width, height)清除指定区域的的像素fillText(text, x, y, [maxWidth])填充文本strokeText(text, x, y [, maxWidth])绘制文本（轮廓）drawImage()绘制位图路径绘制①创建路径 >** ②创建路径> ③**渲染路径beginPath()开始一个新的路径，清除已有路径列表closePath()闭合一个路径moveTo(x, y)移动画笔到坐标x、ylineTo(x, y)画线到坐标x、yellipse(x, y, radiusX, radiusY,r,sa,ea)椭圆路径 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)rect(x, y, width, height)矩形路径arc(x, y, radius, startAngle, endAngle)绘制圆弧路径quadraticCurveTo(cp1x, cp1y, x, y)二次贝塞尔曲线fill([path], [fillRule])填充当前、已存在的路径stroke([path])描边子路径Path2D可以单独申明一个路径对象，支持上面的绘制，还支持SVG的path数据 。<canvas id="canvas" width="400" height="400"></canvas><script> ctx = document.getElementById('canvas').getContext('2d'); // ctx.alpha = false; ctx.fillStyle = 'rgba(250,0,0,0.6)'; ctx.fillRect(10, 10, 40, 40); ctx.fillRect(30, 30, 40, 40); ctx.strokeStyle = 'red'; ctx.lineWidth = 3; ctx.strokeRect(90, 10, 150, 50); ctx.fillStyle = 'rgba(0,0,250,0.5)'; ctx.font = '20px 微软雅黑'; ctx.fillText("文本Text", 120, 40) //path ctx.beginPath(); ctx.moveTo(90, 80); ctx.lineTo(90, 200); ctx.lineTo(190, 200); ctx.closePath(); ctx.arc(120, 120, 50, 0, 360); ctx.fill();</script>

推荐阅读


上一篇：通过 Github Action 实现定时推送天气预报

下一篇：.NET Core C#系列之XiaoFeng.Threading.JobScheduler作业调度