图形库
SVG
SVG的概念和引入方式
1.SVG 指的是可伸缩矢量图形(Scalable Vector Graphics)，用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失，是万维网联盟的标准。
2.SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。 2003 年一月，SVG 1.1 被确立为 W3C 标准。与其他图像格式相比，使用 SVG 的优势有以下几点：
- 可被非常多的工具创建、读取和修改
- 与JPEG和GIF图像比起来尺寸更小，压缩性更强
- 可在任何的分辨率下被高质量地打印，并可在图像质量不下降的情况下被放大
- 图像中的文本是可选的，还可被搜索(很适合制作地图)、索引、脚本化
- 可以与Java技术一起运行，有开放的标准，并且是纯粹的 XML
3.SVG文件，用.svg后缀来保存：
<?xml version="1.0" standalone="no"?>
// standalone="no"意味着SVG文档会引用一个外部文件——这里是DTD文件
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
//该DTD位于W3C，含有所有允许的SVG元素。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
//根元素，width 和 height 属性可设置此 SVG 文档的宽度和高度，version定义所使用的SVG版本，xmlns定义SVG命名空间
<circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/>
</svg>
4.SVG引用方式
方式一:用img引入SVG文件
<img src="1svg.svg"/>
方式二:用样式将SVG做背景
<div style="height:200px; width:200px; background:url(1svg.svg) no-repeat"></div>
方式三:用框架将SVG引入
<iframe src="1svg.svg"></iframe>
方式四:在html页面中书写svg(HTML5技术，命名空间必须有)
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="100" cy="100" r="40" fill="red" />
</svg>
</div>
img在你设置边框的时候，边框是和模型的一部分，设置边框后，盒子的宽度会增加2倍的边框宽。
svg在设置边框时，图形的大小只会增加边框宽度的一半。也就是说设置了边框宽度为10px，但事实上5px的边框向外扩张，5px的边框向内容区扩展。
5.SVG绘制的设置，可以用属性或css样式设置：
- fill填充色：fill=“white”/fill:white;
- fill-opacity填充透明度：fill-opacity=“0.5”/fill-opacity:0.5;
- stroke边框色：stroke=“black”/stroke:black;
- stroke-width边框宽：stroke-width=“5”/stroke-width:5;
- stroke-opacity边框透明度：stroke-opacity=“0.5”/stroke-opacity:0.5;
- opacity整个元素的透明值：opacity=“0.5”/opacity:0.5;
SVG绘制样式
SVG图形绘制
1.SVG图形绘制语法：
- circle(绘制圆形)——属性参数：cx(圆心X轴坐标)、cy(圆心Y轴坐标)、r(半径)
<circle cx="" cy="" r="" fill="" />
//cx和cy默认值为0
- ellipse(椭圆)——属性参数：cx(圆心X轴坐标)、cy(圆心Y轴坐标)、rx(X轴半径)、ry(Y轴半径)
<ellipse cx="" cy="" rx="" ry="" fill="" />
//rx和ry的值相等时即是圆形
-
rect(圆角矩形)——属性参数：width(宽度)、height(高度)、x(左上角X轴坐标)、y(左上角Y轴坐标)、rx(圆角X轴半径)、ry(圆角Y轴半径，省略时为半径为rx的正圆圆角)
<rect x="" y="" width="" height="" rx="" ry="" stroke="" stroke-width="" /> //注意：边框的宽度同时向内外延伸 -
line(画线，线是边框不能用fill填充色)——属性参数：x1(起点X轴坐标)、y1(起点Y轴坐标)、x2(终点X轴坐标)、y2(终点Y轴坐标)
<line x1="" y1="" x2="" y2="" stroke="" stroke-width="" /> //stroke默认白色 -
polyline(折线)——属性参数：points(折点设置)、必须设置fill='transparent’去掉填充
<polyline points="" fill="transparent" stroke="" /> //points的值为坐标对，如：10,10 10,50 50,50 50,100 100,100 100,150polygon(多边形)——属性参数：同上，不去掉填充
<polyline points="" fill="red"/>
SVG文字
text(文字)——属性参数：x(文字X轴坐标)、y(文字Y轴坐标)、font-size(字体大小)、font-family(文字样式)、text-anchor(对齐点，坐标在文字middle/start/end哪个位置)
<text x="" y="" text-anchor="" fill="" >文字内容</text>
//文字用填充色
SVG图片
image(图片)——属性参数：x(图片X轴坐标)、y(图片Y轴坐标)、width(图片宽)、height(图片高)、xlink:href(图片地址)
<image x="" y="" width="" height="" xlink:href=""/>
//这里图片不会变形，会按照width和height最小比例进行缩放
SVG路径
path(路径，单标签)：path是SVG基本形状中最强大的一个，它能创建包括其他基本形状在内的所有形状。如矩形、圆形、椭圆、折线形、多边形，以及贝塞尔曲线、2次曲线等曲线。用属性d来定义路径点，它是一个命令+参数的序列。命令包括:
- M(moveto)/L(lineto)：画笔移至某点/画笔从上个点绘制到当前点位
- H(horizontal lineto)/V(vertical lineto)：绘制水平线/绘制垂直线
- C(curveto)/S(smooth curveto)：三次贝塞尔曲线/简写的三次贝塞尔曲线命令
- Q(quadratic Bézier curve)/T(smooth quadratic Bézier curveto)：二次贝塞尔曲线/简写的二次贝塞尔曲线命令
- A(elliptical Arc)：绘制弧形
- Z(closepath)：闭合路径(从当前位置绘制到起点)
<path d="M50 50 L150 150 L50 150" fill="red"/>
//大写的命令代表绝对位置(参照左上0,0点的位置)，填充时无需设置Z闭合
<path d="M50 150 h100 v-50 Z" stroke="red" stroke-width="2" fill="transparent"/>
//小写的命令代表相对位置(相对于上个点增加或减少多少)
过于复杂的图往往是通过图像转换成path代码的：转换网址
SVG滤镜
SVG模糊和阴影滤镜
1.之前我们学习了css的滤镜，通过filter的值修改元素的效果，SVG也可以设置滤镜，不但可以在SVG中使用，部分甚至可以配合css的filter在HTML中使用。SVG中的滤镜在filter元素中定义，filter元素具有必需的id属性，用于标识滤镜，然后指向要使用的滤镜。SVG的滤镜有很多，用一些常用的举例说明。
2.feGaussianBlur：用于创建模糊效果
<filter id="f1" x="0" y="0">
//定义滤镜，获得f1标识，在SVG的filter属性或元素css的filter样式中使用
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
//in属性决定创建效果；stdDeviation决定了模糊量
</filter>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
3.eOffset：用于创建阴影效果，拍摄SVG图形(图像或元素)并将其在xy平面中偏移，再用feBlend叠加到原图中，如果需要模糊阴影则将feGaussianBlur也设置上，用feColorMatrix将影子的颜色向黑色变化
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
//dx和dy，x轴和y轴偏移距离，将in的值改成SourceAlpha可以变成黑色影子(无论图形什么颜色)，如果设置feColorMatrix可以让颜色向接近黑色变化
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
SVG渐变滤镜
1.linearGradient：用于定义线性渐变，用stop定义线性渐变的颜色点。线性渐变可以定义为水平，垂直或角度渐变：当y1和y2相等且x1和x2不同时，将创建水平渐变；当x1和x2相等且y1和y2不同时，将创建垂直渐变；当x1和x2不同且y1和y2不同时，将创建角度渐变。
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
// x1，x2，y1，y2 属性定义渐变的开始和结束位置
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
//offset为该颜色点在开始到结束的位置
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
//style的stop-color和stop-opacity用于设置颜色和透明度
</linearGradient>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
2.radialGradient：用于定义径向渐变，用stop定义线性渐变的颜色点。cx，cy为最外层中心(决定形状，一般为50%，50%即中心点)，fx，fy为最内层中心(渐变中心点，要设置在图形内)
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="90%">
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
//offset的值决定了梯度，0%即最内层
<stop offset="50%" style="stop-color:green;stop-opacity:0.5" />
<stop offset="100%" style="stop-color:blue;stop-opacity:1" />
//100%即最外层
</radialGradient>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="yellow" />
<text fill="url(#grad1)" font-size="55" font-family="Verdana" x="140" y="90" >SVG</text>
SVG变形和分组
1.SVG变形与css3的变形相似，只不过是写在SVG标记的transform属性上，但是相对于SVG根元素的0,0点，且不能加单位。
- translate：位移
<rect x="0" y="0" width="100" height="100" transform="translate(30,40)" />
-
rotate：旋转
<rect x="-50" y="-50" width="100" height="100" transform="translate(100 100) rotate(45)" /> //为了让其以中心点旋转，我们需要把0,0点设置在其中心点上，然后位移到需要的位置，再旋转 -
skewX()和skewY()：斜切
<rect x="0" y="0" width="100" height="100" transform="skewX(30) skewY(30)" /> -
scale：缩放和翻转
<rect x="0" y="0" width="100" height="100" transform="translate(100 100) scale(-0.5)" /> //负值也是翻转，但是由于中心点在0,0点，一样需要设置中心点防止位移
2.g（分组标签）：是一个容器标签，用来组合元素，这样可以同时控制一组元素，比如执行变形的时候:
<g style="cursor:pointer" transform="translate(100 100) rotate(45) scale(-1,1)">
<circle cx="0" cy="0" r="40" fill="yellow" stroke="red" stroke-width="3" />
<text x="0" y="8" font-size="20" text-anchor="middle"> 新卓越</text>
</g>
SVG动画
SVG基础动画
1.SVG元素不同于HTML的元素，没有办法用定位或边距来改变位置，但可以使用css3的animation样式来执行动画，除此以外SVG还提供了animate标记来设置动画，注意这是需要将SVG编辑设置成双标记，将animate变成它的子元素
2.animate的重要属性：
-
attributeName——需要动画的属性名称；
-
from/to——属性的初始值/终止值；values——动画每个设置点，两个值时与from和to的写法效果一致；
-
dur——动画时长；repeatCount——重复次数，默认一次，indefinite为无限循环
<rect width="100" height="100" x="10" y="10"> <animate attributeName="x" values="10;150;10" dur="4s" repeatCount="indefinite"/> //values设置3个值且最后一个值等于第一个值比较适合循环 </rect> <rect width="100" height="100" x="10" y="120"> <animate attributeName="width" from="100" to="240" dur="4s" repeatCount="3"/> </rect>
3.如果想让元素的更多属性具有动画效果，只要添加更多的animate元素到该元素内部即可。
<rect width="100" height="100" x="10" y="10" fill="red">
<animate attributeName="rx" values="0;25;0" dur="4s" repeatCount="indefinite" />
<animate attributeName="fill" values="red;blue;green;red" dur="4s" repeatCount="indefinite" />
</rect>
SVG变形动画
1.当我们的动画需要做旋转之类的效果时，animate标记明显满足不了，这时就是animateTransform登场的时候了。
2.animateTransform的重要属性：
- attributeName——需要动画的属性名称，只有"transform"；type——变形动画类型，rotate(旋转)、scale(缩放)、translate(位移)、skewX(X轴方向偏移)、skewY(Y轴方向偏移)；
- from/to——各有三个参数，分别为开始/结束角度，X轴开始/结束坐标，Y轴开始/结束坐标；
- dur——动画时长；repeatCount——重复次数，默认一次，indefinite为无限循环
3.将animateTransform设置在要执行变形动画的标记里：
<rect x="50" y="50" width="30" height="40" fill="blue" stroke="black" stroke-width="1" transform="rotation">
<animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" from="0 65 70" to="360 65 70" repeatCount="indefinite" />
//form和to的第二个第三个值起始就是旋转的中心点
</rect>
4.如果想让文字标记也有动画效果，可以用g标记将所有想执行动画的标记包装起来
<g>
<rect x="50" y="50" width="30" height="40" fill="blue" stroke="black" stroke-width="1" transform="rotation"/>
<text x="50" y="70" text-anchor="center" fill="white">文字</text>
<animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" from="0 65 70" to="360 65 70" repeatCount="indefinite" />
</g>
SVG路径动画
1.如果我们希望元素按照我们设计的路线执行动画就要用到animateMotion标记了，路径类似path的方式定义
2.animateMotion的重要属性：
- path——同path标记的d属性，设置一个动画的路径；
- dur——动画时长；repeatCount——重复次数，默认一次，indefinite为无限循环
- rotate——旋转方式，默认值不旋转，auto沿着内圈旋转，auto-reverse沿着外圈旋转
3.用animateMotion设置动画，为了方便看我们将对应的路径一起画了出来:
<path d="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80ZM 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" stroke="red" fill="transparent"/>
<rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="3s" repeatCount="indefinite" rotate="auto">
</rect>
4.甚至我们可以用mpath直接把某个path图形当成路径
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="2"/>
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
SVG的JS操作
<div style="width:500px;height:500px">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
</svg>
</div>
<script>
var oSVG=document.getElementsByTagName('svg')[0];
var oCircle=createSVG('circle',{
"cx":"120",
"cy":"120",
"r":"50",
"fill":"blue"
});
oCircle.onclick=function(){
console.log('yes');
}
oSVG.appendChild(oCircle);
function createSVG(tagName,option){
var sXmls="http://www.w3.org/2000/svg";
var obj=document.createElementNS(sXmls,tagName);
for(var attr in option){
obj.setAttribute(attr,option[attr]);
}
return obj;
}
</script>
练习
//绘制六边形
<div class="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<path d="M100 30 L140 60 L140 100 L100 130 L60 100 L60 60 Z" stroke="black" stroke-width="3px" fill="transparent"></path>
</svg>
</div>
//屏幕解锁静态效果
<div class="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="40" cy="40" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="120" cy="40" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="200" cy="40" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="40" cy="120" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="120" cy="120" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="200" cy="120" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="40" cy="200" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="120" cy="200" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
<circle cx="200" cy="200" r="25" fill="transparent" stroke="black" stroke-width="4px"/>
</svg>
</div>
//靶子效果
<div class="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g transform="translate(160 160)">
<circle cx="0" cy="0" r="140" fill="red"/>
<circle cx="0" cy="0" r="120" fill="#fee4d3"/>
<circle cx="0" cy="0" r="100" fill="red"/>
<circle cx="0" cy="0" r="80" fill="#fee4d3"/>
<circle cx="0" cy="0" r="60" fill="red"/>
<circle cx="0" cy="0" r="40" fill="#fee4d3"/>
<circle cx="0" cy="0" r="20" fill="red"/>
//方式一
<path d="M0 -160 L0 160 Z" stroke="black" stroke-width="2" fill="transparent"></path>
<path d="M-160 0 L160 0 Z" stroke="black" stroke-width="2" fill="transparent"></path>
//方式二
<!-- <line x1="0" y1="-180" x2="0" y2="180" stroke="black" stroke-width="2" />
<line x1="-180" y1="0" x2="180" y2="0" stroke="black" stroke-width="2" /> -->
</g>
</svg>
</div>
Canvas
Canvas的概念
1.canvas是 HTML5 提供的一种新标签，它本身并不具备绘画能力，只是一个画布，一个容器。绘图能力是基于html5的getContext(“2d”)返回的CanvasRenderingContext2D对象(3d需要用到webgl)来完成的。
2.什么时候会用到canvas
- 游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，在流畅度和跨平台方面更强大。
- 可视化数据.数据图表化：比如:百度的 echart
- banner 广告：之前也是由 Flash 完成。而智能机时代，HTML5 技术能够在 banner 广告上发挥更巨大的作用。
- 模拟器/远程计算机控制/图形编辑器：用canvas可以实现这些原本不能在 Web 上控制的功能。
- 其他可嵌入网站的内容(活动页面、特效)：图表、音频、视频，还有许多元素能够更好地与 Web 融合，且不需要任何插件。
- 完整的 canvas 移动化应用
3.与SVG的区别
- svg不依赖分辨率，支持事件处理器，最适合带有大型渲染区域的应用程序(比如谷歌地图)，复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)，不适合游戏应用；
- canvas依赖分辨率，不支持事件处理器，弱的文本渲染能力，能够以 .png 或 .jpg 格式保存结果图像，最适合图像密集型的游戏，其中的许多对象会被频繁重绘
4.创建一个canvas标记，看起来和img标签差不多，只是它只有两个可选的属性 width、heigth 属性，没有 src、alt 属性。不设置widht、height属性时，则默认 width为300、height为150，单位都是px。
也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现缩放。
除非确实需要缩放，否则建议永远不要使用css属性来设置canvas的宽高。
<canvas id="c1" width="400" height="400"></canvas>
//设置绘图环境
var oC = document.getElementById('c1'); //获得画布
var oCG = oC.getContext('2d'); //注意：2d小写
Canvas绘制样式
canvas基本方法
canvas元素起点为左上角(0,0)，x 向右增大，y 向下增大。所有元素的位置都相对于原点来定位。绘制canvas需要在2d对象上绘制路径(不会画出来)，然后调用描边或填充才会画出来
oCG.fillStyle = color;
//设置填充颜色
oCG.strokeStyle = color;
//设置描边颜色
oCG.lineCap = "round";
//端点样式：butt(方形，默认)、round(圆角)、square(多出宽的一半)
oCG.lineJoin = "round";
//边界连接点样式：miter(直角，默认)、round(圆角)、bevel(斜角)
oCG.moveTo(x,y);
//移动画笔到x，y点
oCG.lineTo(x,y);
//绘制直线路径(从画笔上一个的位置绘制到x，y点)
oCG.beginPath();
//开始绘制新路径(以区分与之前的路径)
oCG.closePath();
//闭合该次绘制的最后位置和初始位置
oCG.stroke();
//描边，以线的方式画出绘制的路径
oCG.fill();
//填充，将闭合的路径内填充颜色
注意:
oCG.lineWidth="1"的线的宽度和oCG.lineWidth="2"的线的宽度相同，但是前者的线浅后者的线宽。这是因为：oCG.lineWidth=“1”;oCG.lineTo(20,20);oCG.stroke();的时候就会从(20,20)处向左延伸0.5px并且向右延伸0.5px按理说线的左右像素为19.5px和20.5px但是由于像素点为1px的整数所以实际上会将(20,20)处向左拉伸1px并且向右拉伸1px此时颜色变浅。左右像素为19px和21px,线宽为2px。
oCG.lineWidth="2"则是正常结果。
oCG.beginPath()是指从这里开始重新绘制另外一个路径，不会再重绘前面的路径，而OCG.closePath()则是指闭合路径。两个方法看上去是反义词，事实上只是两个不同的用途并非相反用途。
canvas图形绘制
//绘制矩形：x,y是矩形左上角坐标，width和height是尺寸
oCG.rect(x, y, width, height);
oCG.strokeRect(x, y, width, height);
//直接用描边画出来
oCG.fillRect(x, y, width, height);
//直接用填充画出来
oCG.clearRect(x, y, width, height);
//清除该矩形内的绘制的内容，相当于橡皮擦
//绘制圆弧：圆心到最右边点是 0 度，顺时针方向弧度增大，弧度和角度的转换公式：rad = deg*Math.PI/180
oCG.arc(x, y, r, sAngle, eAngel, anticlockwise);
//x,y是圆心坐标，r是半径，sAngle是起始弧度，eAngel是结束弧度，注意是弧度，anticlockwise是否是逆时针(true 是逆时针，false：顺时针)
oCG.arcTo(x1, y1, x2, y2, r);
//用起始点到x1,y1和x1,y1到x2,y2作为切线，用r作为半径画弧
canvas文字
绘制文字，填充字体用fillStyle设置fillText绘制；描边字体用strokeStyle设置strokeText绘制:
oCG.font = "18px bold 黑体";
// 设置字体
oCG.fillStyle = "#ff0";
// 设置颜色
oCG.textAlign = "center";
// 设置水平对齐方式
oCG.textBaseline = "middle";
// 设置垂直对齐方式
oCG.fillText("要写的文字", 100, 100);
// 绘制文字(参数：内容，指定位置x，y坐标)
textAlign：start(默认): 文本在指定的位置开始；end: 文本在指定的位置结束；center: 文本的中心被放置在指定的位置；left: 文本左对齐；right: 文本右对齐。
textBaseline：alphabetic(默认)：文本基线是字母基线；top：文本基线是四线格的顶端；hanging：文本基线是悬挂基线；middle：文本基线是四线格的正中；ideographic：文本基线是表意字基线；bottom：文本基线是四线格的底端。
canvas图片
绘制图片：该方法也可以绘制视频或另一个画布，将图片对象换成视频/画布对象即可
var img = new Image(); //如图片未在dom中需先创建img对象
img.src = '图片路径';
img.onload = function (){
//图片加载成功后绘制图片
oCG.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
}
img是绘制的图片对象，sx,sy,swidth,sheight是原图切片，如果不设置就是用整张图片绘制，x和y是距离0，0点的距离，width和height是绘制大小(如果缺省就是等于原图大小)
//举个例子
oCG.drawImage(img,300,100,550,220,50,50,400,120);
//从原图(300,100)位置开始，截取宽550高220的尺寸。在canvas里(50,50)开始绘制图，大小为400*120
canvas绘制背景
设置背景图：同图片一样，不在dom中的图需要先加载
var img = new Image();
img.src = '图片路径';
img.onload = function (){
//图片加载成功后绘制背景图
oCG.fillStyle = oCG.createPattern(this,'repeat');
//用图片来绘制填充图像，平铺方式(repeat、repeat-x、repeat-y、no-repeat)
oCG.fillRect(0,0,300,300); //设置完成后可以用此填充图来绘制任何形状
}
保存设置
配置状态的保存和恢复(save和restore)：是绘制复杂图形时必不可少的操作，类似js的函数作用域，在一个save和restore范围内的设置只对其内部生效：
oCG.save(); // 保存默认状态
oCG.fillStyle = 'red'
oCG.fillRect(15, 15, 120, 120);
oCG.save(); // 再次保存当前状态
oCG.fillStyle = '#FFF'
oCG.fillRect(30, 30, 90, 90);
oCG.restore(); // 重新加载之前的颜色状态,退出这次的save()操作
oCG.fillRect(45, 45, 60, 60);
oCG.restore(); // 加载默认颜色配置,退出这次的save()操作
oCG.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
变形和合成
1.和css一样，画布变形也是将要绘制的图形缩放、位移和旋转，但是画布变形的是整个画布，一旦设置所有后续绘制的新元素都被影响。让变形只对需要变形的绘制起效，就要用到save和restore方法。
- translate位移：移动canvas的原点到指定的位置
oCG.translate(x, y); //x轴和y轴的偏移值
- scale缩放：缩放canvas中要绘制的图形
oCG.scale(x, y); //x轴和y轴的缩放因子
- rotate旋转：旋转坐标轴
oCG.rotate(angle); //正值为顺时针，参数值为弧度
2.我们画多个图形时，肯定会出现重叠的情况，默认是后绘制的会覆盖原绘制的，我们可以通过设置合成(globalCompositeOperation)的值改变合成后的样子
oCG.globalCompositeOperation = type;
type的值：source-over(默认，新图覆盖原图)、source-in(仅显示重叠部分的新图)、source-out(仅显示未重叠部分的新图)、source-atop(显示重叠部分的新图和所有原图)、destination-over(原图覆盖新图)、destination-in(仅显示重叠部分的原图)、destination-out(仅显示未重叠部分的原图)、destination-atop(显示重叠部分的原图和所有新图)、lighter(同默认，重叠部分颜色叠加)、darken(同默认，重叠部分高亮)、lighten(同默认，重叠部分变暗)、xor(同默认，重叠部分透明)、copy(仅保留新图)
小例子
//绘制一个正方形
<canvas width="500" height="500"></canvas>
<script>
var oC=document.getElementsByTagName('canvas')[0];
var oCG=oC.getContext('2d');
oCG.fillRect(100,100,150,150);
</script>
//绘制一个旋转45度的正方形
<canvas width="500" height="500"></canvas>
<script>
var oC=document.getElementsByTagName('canvas')[0];
var oCG=oC.getContext('2d');
oCG.translate(175,175);
//将画布的原点移动到(175,175)的位置也就是原本正方形的中心点
oCG.rotate(45*Math.PI/180);
//将所作图形按照原点顺时针旋转45度
oCG.fillRect(-75,-75,150,150);
//既然原本的(175,175)充当了画布原点，那么原本的正方形的左上角点(100,100)就变成了(-75,-75)
</script>
//要求:绘制一个红色小方块，不断旋转的同时由小变大再由大变小
<canvas width="500" height="500"></canvas>
<script>
var oC=document.getElementsByTagName('canvas')[0];
var oCG=oC.getContext('2d');
var scal=1;
var rota=1;
var flag=true;
//var change=0.01;
//oCG.globalCompositeOperation = "copy";
//有了这句可以代替oCG.clearRect()
setInterval(function(){
oCG.clearRect(0,0,oC.width,oC.height);
oCG.save();
oCG.translate(250,250);
//方法一
if(scal<2&&flag){
scal+=0.01;
}else{
scal-=0.01;
flag=false;
if(scal<=0.1){
scal+=0.01;
flag=true;
}
}
//方法二
// if(scal>2){
// change=-0.01;
//}else if(scal<=0){
// change=0.01;
//}
//scal+=change;
oCG.scale(scal,scal);
oCG.rotate((rota++)*Math.PI/180);
oCG.fillStyle="#f40";
oCG.fillRect(-75,-75,150,150);
oCG.restore();
},17)
</script>
canvas保存图片
1.我们可以将绘制好的canvas生成图片或保存下来，需要将生成的base64放在img的src属性或a的href属性中
2.toDataURL：把 canvas 绘制的内容输出成base64内容，参数为图片格式(image/png、image/jpeg)
方法一
<canvas width="500" height="500"></canvas>
<a href="">aa</a>
<script>
var oC=document.getElementsByTagName('canvas')[0];
var oCG=oC.getContext('2d');
oCG.fillStyle="red";
oCG.arc(150,150,100,0,360);
oCG.fill();
var oA = document.querySelector("a");
oA.href = oC.toDataURL("image/png");
oA.download = "p.png"; //download为下载图片的名字
</script>
方式二
<canvas width="500" height="500"></canvas>
<img src="" />
<script>
var oC=document.getElementsByTagName('canvas')[0];
var img = document.querySelector("img");
var oCG=oC.getContext('2d');
oCG.fillStyle="red";
oCG.arc(150,150,100,0,360);
oCG.fill();
img.src = oC.toDataURL("image/png"); //注意toDataURL是画布方法，不是2d绘图环境的方法
</script>
3.配合html2canvas.js库，我们设置可以将一个html的部分转换成canvas，然后再生成图片或者下载
<style>
table,td{
border: 1px #000 solid;
background-color: orange;
}
td{
width: 120px;
height: 60px;
}
</style>
<table cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<a href="">aa</a>
</tbody>
</table>
<script src="../canvastoimg.js"></script>
<script>
var oTable=document.getElementsByTagName('table')[0];
var oA=document.getElementsByTagName('a')[0];
new html2canvas(oTable).then(canvas=>{
let oImg=new Image();
oImg.src=canvas.toDataURL('image/png');
document.body.appendChild(oImg);
oA.href=canvas.toDataURL('image/png');
oA.download="my.png";
})
</script>
Canvas动画
1.canvas的动画并不是绘制的图形动起来了，而是通过不停的绘制清空来实现动画的。
2.实现动画帧的步骤：
- 清空canvas：在绘制每一帧动画之前，需要用clearRect()清空画布
- 保存canvas状态：如果在绘制的过程中会更改canvas的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则需要保存canvas的状态
- 绘制动画图形：绘制你需要的动画帧
- 恢复canvas状态：绘制完成一帧之后恢复前面保存了的canvas状态
3.下面我们就画出了一帧，接着使用计时器重复上面过程：如setInterval()/setTimeout()/requestAnimationFrame()等方法，setTimeout()和requestAnimationFrame()需要递归，接着让每一帧画面都出现一些变化就实现了动画效果，如：
var x = 0,y = 0;
var timer = setInterval(function (){
oCG.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
oCG.fillRect(x++,y++,100,100);
if(x>oC.offsetWidth-100){
clearInterval(timer);
}
},50)
练习
电子时钟效果
几个注意点：
-
对于时来说:(走一圈360度24小时)
1小时时针走30度
对于分针来说1小时走了360度走了60分钟，对于时针来说1小时走了30度也走了60分钟，那么走1分钟时针走了(30/60)度。
-
对于分来说:(走一圈360度60分钟)
分针走了一分钟秒针就走了60秒。60分钟为一整圈，那么1分钟就走了6度。也就是说60秒走了6度。进而可以得出1分钟是6度；1秒钟是0.1度。
对于秒针来说1分钟走了360度走了60秒，对于分针来说1分钟走了6度也走了60秒，那么走1秒分针走了(6/60)度。
-
那么每分钟时针的角度(Hours30+Minutes/2-90)而不是(Hours30+Minutes/2)的原因是按照钟表来说将12点方向看成0度位置，可以写成(Hours30+Minutes/2);但是由于canvas画布12点方向是-90度，因此实际的计算公式为(Hours30+Minutes/2-90)。
-
oCG.arc(200,200,50,(Hours*30+Minutes/2-90)Math.PI/180,(Hours30+Minutes/2-90)*Math.PI/180,false);这种开始角度和终止角度绘制出来的图形是一个有偏向角度的直线。
//电子时钟效果
<canvas width="400" height="400" class="myCanvas"></canvas>
<script>
var oC=document.getElementsByClassName('myCanvas')[0];
var oCG=oC.getContext('2d');
oCG.strokeStyle="black";
var Hours=0;
var Minutes=0;
var Seconds=0;
for(var i=0;i<60;++i){
oCG.beginPath();
oCG.moveTo(200,200);
oCG.arc(200,200,150,(i*6)*Math.PI/180,((i+1)*6)*Math.PI/180,false);
oCG.stroke();
}
oCG.beginPath();
oCG.fillStyle="white";
oCG.arc(200,200,140,0,360*Math.PI/180,false);
oCG.fill();
oCG.strokeStyle="orange";
for(var i=0;i<12;++i){
oCG.beginPath();
oCG.moveTo(200,200);
oCG.arc(200,200,150,(i*30)*Math.PI/180,(i*30)*Math.PI/180,false);
oCG.stroke();
}
oCG.beginPath();
oCG.fillStyle="white";
oCG.arc(200,200,130,0,360*Math.PI/180,false);
//少写oCG.fill()就会有一些不同之处
oCG.fill();
oCG.beginPath();
oCG.fillStyle="black";
oCG.arc(200,200,5,0,360*Math.PI/180,false);
oCG.fill();
setInterval(function(){
init();
},1000);
function init(){
oCG.clearRect(100,100,200,200);
//不加这里的oCG.beginPath()会出现问题。
oCG.beginPath();
oCG.fillStyle="black";
oCG.arc(200,200,5,0,360*Math.PI/180,false);
oCG.fill();
var time=new Date();
Hours=time.getHours();
Minutes=time.getMinutes();
Seconds=time.getSeconds();
//下面的这三个oCG.beginPath()也很重要。如果不写可能会出现时针中有一根红色的细线，分针中也有根红色的细线。
oCG.beginPath();
oCG.strokeStyle="gray";
oCG.lineWidth="5";
oCG.moveTo(200,200);
oCG.arc(200,200,50,(Hours*30+Minutes/2-90)*Math.PI/180,(Hours*30+Minutes/2-90)*Math.PI/180,false);
oCG.stroke();
oCG.beginPath();
oCG.strokeStyle="black";
oCG.lineWidth="3";
oCG.moveTo(200,200);
oCG.arc(200,200,80,(Minutes*6+Seconds/10-90)*Math.PI/180,(Minutes*6+Seconds/10-90)*Math.PI/180,false);
oCG.stroke();
oCG.beginPath();
oCG.strokeStyle="#f40";
oCG.lineWidth="2";
oCG.moveTo(200,200);
oCG.arc(200,200,100,(Seconds*6-90)*Math.PI/180,(Seconds*6-90)*Math.PI/180,false);
oCG.stroke();
}
init();
</script>
//绘制视频
<video src="./Intermission-Walk-in_512kb.mp4" id="video" controls></video>
<canvas class="myCanvas"></canvas>
<script>
var oC=document.getElementsByClassName('myCanvas')[0];
var oCG=oC.getContext('2d');
var video=document.getElementsByTagName('video')[0];
//必须是window.onload,此外video.onloadedmetadata也是可以的
window.onload = function (){
//图片加载成功后绘制图片
oC.width=video.videoWidth;
oC.height=video.videoHeight;
setInterval(function(){
oCG.clearRect(0,0,oC.offsetWidth,oC.offsetHeight);
oCG.drawImage(video,0,0);
},16.67);
}
</script>
//自制画笔功能
<canvas width="400" height="300" class="myCanvas"></canvas>
<br/>
<input type="text" placeholder="请输入画笔的宽度" value="3"/>
<span>画笔的颜色:</span><input type="color" />
<script>
var oC=document.getElementsByClassName('myCanvas')[0];
var oCG = oC.getContext('2d');
var oWidth=document.getElementsByTagName('input')[0];
var oColor=document.getElementsByTagName('input')[1];
oCG.lineWidth=oWidth.value;
oCG.strokeStyle=oColor.value;
oC.onmousedown=function(e){
oCG.beginPath();
oCG.moveTo(e.pageX-oC.offsetLeft,e.pageY-oC.offsetTop);
document.onmousemove=function(ev){
oCG.lineTo(ev.pageX-oC.offsetLeft,ev.pageY-oC.offsetTop);
oCG.stroke();
}
document.onmouseup=function(){
oCG.closePath();
document.onmouseup=document.onmousemove=null;
}
}
oWidth.onchange=function(){
oCG.lineWidth=oWidth.value;
}
oColor.onchange=function(){
oCG.strokeStyle=oColor.value;
}
</script>
jCanvas
jCanvas的概念
1.js有jQuery库，canvas如果不做封装写起来也是很麻烦，且不能像对象一样操作。jCanvas就是一个基于jQuery的免费且开源的 HTML5的Canvas API。它能让你用原生的Canvas API来实现，并可以做更多的事情。你也可以将原生的Canvas API方法和jCanvas一起使用，draw()方法就可以这样使用。你还可以用自己的方法结合 extend()函数来扩展jCanvas的功能。
2.jCanvas需要依赖 jQuery才能正常工作，所以还要确保引入了 jQuery文件：
<script src="js/jquery.min.js"></script>
<script src="js/jcanvas.js"></script>
jCanvas绘制样式
绘制矩形
drawRect()方法
$("canvas").drawRect({
fillStyle: 'steelblue', //设置填充色
strokeStyle: 'blue', //设置边框色
strokeWidth: 4, //设置边框宽
x: 150, //设置基点x轴位置
y: 100, //设置基点y轴位置
fromCenter: false, //基点是否为中心点(false为矩形左上角)
width: 200, //设置矩形宽
height: 100 //设置矩形高
});
绘制圆弧和圆
drawArc() 方法
$("canvas").drawArc({
fillStyle: 'steelblue',
strokeStyle: 'blue',
strokeWidth: 4,
x: 300, y: 100, //设置圆心x/y轴位置
radius: 50, //设置半径
ccw:true, //是否逆时针(false默认值为顺时针)
start: 0, end: 200 //设置起点/终点角度(0为12点位置)
});
链式操作
由于绘制对象是jQ对象，因此可以像jQ一样进行链式操作，绘制一个笑脸：
$("canvas").drawArc({
// draw the face
fillStyle: 'yellow',
strokeStyle: '#333',
strokeWidth: 4,
x: 300,
y: 100,
radius: 80
}).drawArc({
// draw the left eye
fillStyle: '#333',
strokeStyle: '#333',
x: 265,
y: 85,
radius: 5
}).drawArc({
// draw the right eye
fillStyle: '#333',
strokeStyle: '#333',
x: 335,
y: 85,
radius: 5
}).drawArc({
// draw the smile
strokeStyle: '#333',
strokeWidth: 4,
x: 300, y: 120,
radius: 30,
start: 110,
end: 250
});
绘制线条
drawLine()
$("canvas").drawLine({
strokeStyle: 'steelblue',
strokeWidth: 10,
rounded: true, //设置边界连接点是否为圆角
closed: true, //设置是否闭合路径
x1: 100, y1: 28, //设置第一个点坐标......
x2: 50, y2: 200,
x3: 300, y3: 200,
x4: 200, y4: 109
});
绘制文字
drawText()
$("canvas").drawText({
text: 'Canvas is fun', //文字内容
fontFamily: 'cursive', //字体
fontSize: 40, //字体大小
x: 290, y: 150,
fillStyle: 'lightblue',
strokeStyle: 'blue',
strokeWidth: 1
});
绘制路径
drawPath()方法。你可以用画线条和曲线同样的方式画箭头，但你必须提供一些箭头专有的属性
$("canvas").drawPath({
strokeStyle: '#000',
strokeWidth: 4,
x: 10,
y: 10,
//以(10,10)为canvas画布的原点
p1: {
//当type="line"时其实就相当于绘制线条
type: 'line', //路径类型(常用的line-线、arc-圆弧、quadratic-二次曲线、vector-矢量)
x1: 100, y1: 100, x2: 200, y2: 100
},
});
//绘制箭头
$("canvas").drawPath({
strokeStyle: '#000',
strokeWidth: 4,
x: 10,
y: 10,
p1: {
//第二部分
type: 'line',
startArrow: false, //是否有一个箭头画在路径的开始点。
endArrow: true, //是否有一个箭头画在路径的结束点
arrowRadius: 25, //箭头的每个尖端的长度
arrowAngle: 90, //箭头两个尖端的夹角
x1: 100,
y1: 100,
x2: 290,
y2: 100
},
p2: {
//第三部分
type: 'line',
startArrow: false,
endArrow: true,
arrowRadius: 25,
arrowAngle: 90,
x1: 100,
y1: 100,
x2: 100,
y2: 250
}
});
绘制图片
drawImage()方法
$('canvas').drawImage({
source: $('#fish')[0], //绘制DOM已经存在的图片，或用'imgs/cat.jpg'绘制未加载的图片
x: 50,
y: 50,
fromCenter: false,
width: 100,
height: 100, //图片大小
shadowColor: '#222', //阴影颜色
shadowBlur: 3, //模糊距离
rotate: 40, //旋转角度
load (){
//未加载的图片可以设置
//加载图片后的代码，
}
});
该方法本来就是在图片加载成功之后才绘制的。
创建图层
addLayer()方法或layer属性，向画布添加了一个图层。
$('canvas').drawRect({
layer: true, //创建一个图层后绘制图形
name: 'myBox', //用来检索图层、删除图层或变动图层
fillStyle: '#585',
x: 100,
y: 100,
width: 100,
height: 50
});
jCanvas事件和动画
1.可以在任何jCanvas图层上绑定任意数量的jCanvas事件。jCanvas支持鼠标事件和触摸事件事件会和 图层API结合使用。
2.支持事件的方法：drawRect()、drawArc()、drawEllipse()、drawLine()、drawQuadratic()、drawBezier()、drawVector()、drawGraph()、drawPolygon()、、drawImage()、drawText()
3.支持的事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、dragstart、drag、dragstop、touchstart、touchend、touchmove
4.配合animateLayer执行动画效果
$('canvas').drawRect({
layer: true,
//绘制图层
fillStyle: '#6c0',
x: 100,
y: 100,
width: 100,
height: 80,
click (layer) {
//layer为图层对象
$(this).animateLayer(layer,{
rotate : layer.rotate+144
},400)
}, //参数：执行动画的图层对象、变化样式和动画时间
animatestart (layer){
},
//动画开始时，要运行的代码
animate (layer, fx){
},
//动画相关属性的动画fx(prop属性为执行动画的样式、start为初始值、now为当前值、end为结束值)的每个帧上运行这些代码
animateend (layer){
}
//动画结束时，要运行的代码
});
jCanvas拖拽图层
1.利用属性draggable设置为true可以把一个图层变成可拖曳。
$('canvas').drawArc({
layer: true,
draggable: true,
fillStyle: '#36c',
x: 150,
y: 150,
radius: 50
}).drawRect({
layer: true,
draggable: true,
fillStyle: '#6c1',
x: 100,
y: 100,
width: 100,
height: 100
});
2.拖曳事件：通过定义dragstart、drag、dragstop和dragcancel为各种拖曳事件提供回调函数。
$('canvas').drawArc({
layer: true,
draggable: true,
fillStyle: '#36c',
x: 150,
y: 150,
radius: 50,
groups: ['shapes'],
//设置图层组，设置该值的图层即为同一组
dragGroups: ['shapes'],
//拖曳编组，当图层被拖曳时，同一编组中所有其它图层都会被拖动。
dragstart (layer) {
},
// 在拖曳开始时要运行的代码
drag (layer) {
},
// 当正在拖曳时要运行的代码
dragstop (layer) {
},
// 在停止拖曳时要运行的代码
dragcancel (layer) {
}
// 在把一个图层拖出画布时要运行的代码(拖拽过程中鼠标离开画布)
}).drawRect({
layer: true,
draggable: true,
fillStyle: '#6c1',
x: 100,
y: 100,
width: 100, h
eight: 100,
groups: ['shapes'],
dragGroups: ['shapes'] //设置与上面相同的组和拖拽编组
});
练习
//制作一个不断有不同颜色的圆圈有不透明变为透明的效果
<canvas width="500" height="500"></canvas>
<script src="../jquery.js"></script>
<script src="./jcanvas.js"></script>
<script>
var index=0;
setInterval(function(){
index++;
$('canvas').drawArc({
layer:true,
name:'circle'+index, fillStyle:`rgb(${
Math.random()*255},${
Math.random()*255},${
Math.random()*255})`,
x: Math.random()*$('canvas')[0].offsetWidth,
y: Math.random()*$('canvas')[0].offsetHeight,
radius: 5,
ccw:true,
start: 0,
end:360,
anmateend(layer){
$('canvas').removeLayer(layer.name);
}
}).animateLayer('circle'+index,{
opacity:0,
radius:50
},900)
},90)
</script>
ECharts数据可视化
ECharts的概念
数据可视化的目的是借助图形化清晰有效的传达与沟通信息，把数据从数字转换成图形，更好的揭示数据规律。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts用法
- 下载并引入echarts.js文件
- 准备具备大小的DOM容器
- 初始化echarts实例对象
- 指定配置项和数据(option)
- 将设置好的配置项赋予echarts实例对象
<script src="echarts.min.js"></script>
<div class="box"></div>
//设置容器(必须有大小)
var myChart = echarts.init(document.querySelector(".box"));
//得到echarts实例对象
var option = {
//指定配置项和数据
//配置code
};
myChart.setOption(option);
//将配置项赋予echarts实例对象
ECharts的配置
option配置对象中包含很多需要配置的属性：
- title：标题。通过text属性设置图标标题(字符串格式)
- tooltip：提示框组件。通过trigger属性设置触发方式：‘item’——数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；‘axis’——坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；‘none’——不触发
- legend：图例组件。通过data属性设置所有图例的项(数组格式)
- toolbox：工具箱组件。feature属性用于定义工具箱功能(对象格式，如设置saveAsImage:{}用于保存图片)
- grid：网格——坐标系内部分。left/right/bottom属性决定坐标系到容器左右下的距离(百分比字符串)。containLabel属性决定是否显示刻度标记(布尔值格式)
- xAxis：横坐标。用type属性控制坐标轴类型：‘value’——数值轴；‘category’——类目轴，必须同时设置data设置类目数据；‘time’——时间轴；‘log’——对数轴。data属性设置类目轴的具体数据(数组格式)。bounderyGap属性设置数据是在点中(true)/点上(false)。
- yAxis：纵坐标。同上
- series：系列图表类型，值为数组。每项为一个对象对应每个图例的图表类型，该对象中的属性为：name——图例名称；type——图例类型(‘line’：折线图；‘bar’：柱状图；‘pie’：饼状图；‘scatter’：散点图；‘radar’：雷达图；‘tree’：树图；‘map’：地图；‘graph’：关系图)；stack——若设置并赋予相同的值则数据会发生堆叠(不交叉)；data：具体数据(数组)
- color：图形颜色，值为数组
ECharts引入官网实例
1.首先在官网查找我们需要的类似实例，将其引入到HTML页面中，并根据需求定制图标。由于每个实例都需要初始化echarts实例对象和设置，因此需要用到立即执行函数来防止变量污染。
2.定制图表效果：根据我们的需要修改图表内容和样式，找到该实例的设置内容，按照配置属性修改(更详细的设置请查看官网的配置项手册)
3.图表自适应浏览器大小
window.onresize = function (){
myChart.resize();
}
练习
chart.js和Echarts(百度)的区别
- charts.js灵活性更高，需要掌握的语法知识更多，入手慢
- Echarts灵活性不高，可以使用现成的demo然后修改样式使用。入手快。
//做一个学习前端的Echarts图
<style>
.box{
width: 600px;
height: 500px;
}
</style>
<div class="box"></div>
<script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.querySelector(".box"));
var option={
title: {
text: '前端学习组成',
subtext: '纵使风吹',
left: 'center',
bottom:'0%'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '组成部分',
type: 'pie',
radius: '60%',
data: [
{
value: 0.1, name: 'HTML和CSS'},
{
value: 0.1, name: 'HTML5和CSS3'},
{
value: 0.3, name: 'JavaScript'},
{
value: 0.02, name: 'webpack'},
{
value: 0.02, name: 'Git'},
{
value: 0.05, name: 'ES6'},
{
value: 0.03, name: 'JQuery'},
{
value: 0.03, name: '移动端'},
{
value: 0.15, name: 'React'},
{
value: 0.1, name: 'VUE'},
{
value: 0.1, name: '项目实战'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
</script>
如图所示:
