SVG和canvas画图，js求数组最大最小值

windows命令行的内容怎么复制，
右键选择标记，选中内容后再点击鼠标右键就复制了。

安装Node.js后再用npm install命令会出现如下warn：
saveError ENOENT: no such file or directory, open 'C:\Users\MBENBEN\package.json'
enoent ENOENT: no such file or directory, open 'C:\Users\MBENBEN\packagage.json'

解决方法是
在命令行切换到安装nodejs文件下的nodejs\node_modules\npm 后执行npm install

windows命令行跳转到指定文件夹下 cd 命令。例如：
cd D:\nodejs\node_modules\npm就会跳转到这个文件下了，然后就看可以执行npm了

SVG数据可视化（Scalable Vector Graphics可缩放矢量图形）

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

保存为后缀名为svg的文件，html文件引用时：
使用 <iframe> 标签
<iframe> 标签可工作在大部分的浏览器中。
语法：
<iframe src="rect.svg" width="300" height="100">
</iframe>

SVG画图
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
下面的命令可用于路径数据：
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 中，可用的滤镜有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
例子：
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
滤镜声明在style里面。filter属性通过id引用合适的滤镜。

SVG渐变
<linearGradient>线性渐变
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
tyle="fill:url(#orange_red)"/>
s当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<radialGradient>放射性渐变
<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="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，
fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，
cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

<g>标签可以包裹其他标签成一个块。然后可以操作整体。
<g stroke="green" fill="white" stroke-width="5">
<circle cx="25" cy="25" r="15" />
<circle cx="40" cy="25" r="15" />
<circle cx="55" cy="25" r="15" />
<circle cx="70" cy="25" r="15" />
</g>

transform属性可以改变元素的位置，旋转角度，放大缩小，颜色变化等等

求JS数组的最大最小值：

使用Math.max和Math.min方法
var a=[1,2,3,5];
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
多维数组可以这么修改：
var a=[1,2,3,[5,6],[1,4,8]];
var ta=a.join(",").split(",");//转化为一维数组
alert(Math.max.apply(null,ta));//最大值
alert(Math.min.apply(null,ta));//最小值

使用ES6的扩展运算符
var arr = [22,13,6,55,30];
console.log(arr.Math(...arr)); // 55

排序法
先把数组从小到大排序，数组第一个即为最小值，最后一个即为最大值
ary.sort(function(a,b){return a-b;});
var minN = ary[0];
var maxN = ary[ary.length-1];

用JavaScript创建SVG元素
//通过createElementNS创建svg元素并设置属性

var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');

svg.setAttribute("style","width:100%;height:100%;");
// 宽高可以自定义
svg.setAttribute("viewBox","0 0 100 100");

//创建矩形元素并设置属性

var rect=document.createElementNS('http://www.w3.org/2000/svg','rect');

rect.setAttribute("x","10");

rect.setAttribute("y","10");

rect.setAttribute("width","20");

rect.setAttribute("height","20");

rect.setAttribute("style","fill:#ff6666;stroke-width:1;stroke:rgb(255,0,0)");

document.createElementNS(namespaceURI, qualifiedName[, options]);
namespaceURI
指定与元素相关联的命名空间URI的字符串。
创建的元素的namespaceURI属性使用namespaceURI的值进行初始化。
参见有效的命名空间URL。
qualifiedName
指定要创建的元素的类型的字符串。
创建的元素的nodeName属性使用qualifiedName的值进行初始化。
options可选的
一个可选的包含单个属性的ElementCreationOptions对象，
其值是预先使用customElements.define()定义的自定义元素的标签名称。
为了向后兼容自定义元素规范的早期版本，一些浏览器允许您在此使用字符串替代对象，
其中字符串的值是自定义元素的标签名称。

有效的命名空间URI
HTML - 参阅 http://www.w3.org/1999/xhtml
SVG - 参阅 http://www.w3.org/2000/svg
XBL - 参阅 http://www.mozilla.org/xbl
XUL - 参阅 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

Canvas画图
fillRect(x, y, width, height)
绘制一个填充的矩形

strokeRect(x, y, width, height)
绘制一个矩形的边框

clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。
width和height设置矩形的尺寸。

路径
首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()
通过线条来绘制图形轮廓。

fill()
通过填充路径的内容区域生成实心的图形。

moveTo(x, y)
将笔触移动到指定的坐标x以及y上。

lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线。

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆）
从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。
参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

Path2D()
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。
new Path2D(); // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d); // 从SVG建立Path对象

drawImage方法
JavaScript 语法 1
在画布上定位图像：
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
sx,sy,swidth,sheight表示引用的img的参数

可以通过一系列属性来设置线的样式
lineWidth = value
设置线条宽度。
lineCap = type
设置线条末端样式。
lineJoin = type
设定线条与线条间接合处的样式。
miterLimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
设置虚线样式的起始偏移量。

解决多个cancas元素的布局问题。怎么样才能互不影响。-----低级错误，变量用错了,多个canvas不会互相影响。