canvas

[chengfengliu]

绘图：

1.SVG（Scalable Vector Graphics，可缩放矢量图形），一门专用于描述图形文档而非描述文字文档。
2.canvas（画布），一个能够封装图片的DOM元素。它提供了在空白的html节点上绘制图形的编程接口。
SVG与canvas的最主要区别在于SVG保存了对于图像的基本信息的描述，我们可以随时移动或修改图像。另外，画布在绘制图像的同时会把图像转换成像素（在栅格中的具有颜色的点）并且不会保存这些像素表示的内容。唯一的移动图形的方法就是清空画布（或者围绕着图形的部分画布）并在新的位置重画图形。

SVG是一个高层的、基于XML的标记语言，可以通过创建XML元素属性来定义图像；而画布则提供了可以直接从JavaScript访问的绘图API。

SVG

<svg xmlns="url/2018/svg">
    <circle/>
    <rect/>
</svg>

xmlns属性把一个元素（以及它的子元素）切换到一个不同的XML命名空间。这个由url定义的命名空间，规定了我们当前使用的语言。在HTML中不存在的与标签，但这些标签在SVG中是有意义的，你可以通过这些标签的属性来绘制图像并指定样式与位置。

canvas

<canvas width="120" height="60"></canvas>
绘图接口canvas.getContext(); 2d——二维 webgl——三维
fillRect(x,y,width,height);//填充一个矩形
fillStyle = color;//填充颜色
strokeRect,strokeStyle//轮廓
渐变：
createLinearGradient()或createRadialGradient(circle1X,circle1Y,circle1Radius,circle2X,circle2Y,circle2Radius)
1.使用createLinearGradient()创建一个CanvasGradient对象。传入的4个参数定义了将绘制渐变颜色的线。
2.沿着这条线添加颜色点，其中0表示线的开始，1表示线的末尾。定义渐变你必须至少设置两个颜色点。
cg.addColorStop(spot,color)
3.使用CanvasGradient对象作为填充或描边的样式。
ctx.fillStyle = cg

路径

context.beginPath();//开始新路径
context.moveTo(x,y)//起点
context.lineTo(x,y);//终点
context.closePath();//结束路径
context.stroke();//勾画路径
quadraticCurveTo(x,y,z,t) arcTo(x1,y1,x2,y2,radius) arc(x,y,radius,startAngle,endAngle,antiClockwise)
//曲线（非对称曲线） 圆弧(两条直线间的圆弧，由radius决定) 圆(圆心，半径，角度，方向false顺时针)
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
//方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点

“to”命令的结束位置也定义了下一个“to”命令的开始位置。你可以将“to”命令想象成用笔在纸上连续地画线（不离开纸面）。moveTo()命令则使你将笔离开纸面，并从其他地方重新开始画。
fill()自动关闭路径。

图像

计算机图形学领域经常将矢量图形和位图图形分开来讨论。绘制路径就是第一种图形，即通过对图形的逻辑描述来绘图。而位图则相反，不需要设置实际图形，而是通过处理像素数据来绘制图像（光栅化的着色点）。
我们可以使用drawImage方法在画布上绘制像素值。此处的像素数值可以来自元素，或者来自其他的画布，而且两者都不需要在实际的文档中可见。

img.addEventListener("load",function(){
     context.drawImage(img,width,height);
});

clearRect方法会将目标矩形透明化，并移除掉之前绘制的像素值，而不是着色。

对比

HTML——简单，很好地与文字集成使用。
SVG——可以任意缩放而仍然清晰的图像。
以上两者都会构建一个新的数据结构（DOM）来代表图片对象。这使得在绘制元素之后对其进行修改更为可能。如果需要重复的修改在一张大图片中的一小部分，来对用户的动作进行响应或者作为动画的一部分时，在画布里做这件事情将会极其的昂贵。DOM也可以允许我们在图片上的每一个元素（甚至在SVG画出的图形上）注册鼠标事件的处理器。在画布里则实现不了。
canvas——画布的基于像素的方法在需要绘制大量的微小元素时会有优势。它不会构建新的数据结构而是仅仅重复的在同一个像素上绘制。