图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制图表</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的对象。
var
canvas = documentgetElementById('canvas'),
context = null;
context = canvasgetContext('2d');
var img = new Image();
imgsrc ='chart-backgroundpng';//这里是一张具有图表背景的
// 2、绘制一个具有图表背景的后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
imgonload = function() {
//绘制
contextdrawImage(img, 0, 0);
//绘制直线
contextbeginPath();
contextmoveTo(70, 105);
contextlineTo(105, 132);
contextlineTo(142, 250);
contextlineTo(176, 175);
contextlineTo(212, 145);
contextlineTo(245, 197);
contextlineTo(280, 90);
contextstroke();
}
</script>
<script src="jqueryjs"></script>
</body>
</html>
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
在实际的开发当中，我们经常会涉及到绘制路径，这里我们总结一下 Path 的常用 API 。
对于一个 Path 来说，它其中有很多的”子路径“，对于每个”子路径“，它又会有两个变量，"源点"和"当前点"，也就是源码当中所描述的：
下面是 Path 当中和连线相关的方法：
每次调用完 moveTo/rMoveTo 方法，都会生成一条新的子路径，这两者的区别在于：
1 新建一条路径， (x, y) 作为这个新路径的“源点"的值，在图上不会产生新的连线。
2 相对于当前路径的"当前点"的值，移动坐标 (dx, dy) ，作为新路径的"源点"，在图上不会产生新的连线。
1 从当前点位置，直线连接到绝对坐标 (x, y) ，如果没有调用过 moveTo/rMoveTo ，那么会先调用 moveTo(0, 0) 来生成一条从源点开始的子路径。
2 相对于当前点坐标，移动 (dx, dy) 作为终点坐标，并连接起点和终点。
1 从当前点位置开始，以 (x1, y1) 为控制点，按一阶贝塞尔曲线计算方法连接到 (x2, y2) ，如果之前没有调用过 moveTo/rMoveTo ，也会先调用一次 moveTo(0, 0) 方法。
2 类似于上面，只不过终点坐标是相对于当前点坐标移动了 (dx2, dy2) 后的值。
和一阶贝塞尔曲线类似，不过是多了一个控制点 (x2, y2) 。
上面这三个函数，最终都是调用了同一个方法：
它的原理就是：首先根据 RectF 或者 4 个点的坐标来确定一个矩形区域，之后得到这个矩形的内切椭圆，然后再根据 startAngle 和 sweepAngle 来确定这个内切源的一段弧，这段弧就是新绘制的路径。但是这段弧的起点很有可能和 Path 的当前点不是重合的，这时候就根据 forceMoveTo 来决定是否产生一条新的子路径，从最终的结果看，就是是否需要绘制一条从 Path 当前点到这段弧起点的连线，如果为 forceMoveTo=false ，那么就绘制这么一条直线，反之，则不绘制， forceMoveTo 的默认值为 false 。
forceMoveTo=false
forceMoveTo=true
forceMoveTo=true + pathclose()
对于这种情况，由于采用了 true 标志位，因此生成了一条新的”子路径“，所以在调用 close 方法之后，连接的是当前子路径的源点和当前点。
如果对于当前”子路径“来说，它的"当前点"和"源点"不重合，那么会绘制一条从当前点到源点的直线。
除了采用连线的方法来确定一条路径， Path 还提供了 addXXX 来直接地增加一整段的路径，下面是相关的方法：
下面是运行的结果：
关于填充类型的方法有如下这些：
关于这个 FillType 的理解，下面这篇文章的作者说的很好：
我这里只是稍微地总结一下：
我们都知道 Paint 有三种模式： FILL/FILL_AND_STROKE/STROKE ，对于 STROKE 来说，是只绘制轮廓，而两种模式都涉及到”填充“，那么”填充“就涉及到怎么定义一个 Path 所组成的图形的内部， FillType 就是用来确定这个所谓的”内部“的定义的，需要注意，只讨论封闭图形的情况。
关于 Path 的计算，有下面这两个方法：
我们以 XOR 为例子：
最后的结果为：
Path 提供了两种重置方法：
我们可以获取canvas对象为var c=documentgetElementById("myCanvas");其应有js属性方法如下列举：
1：绘制渲染对象，cgetContext("2d"),获取2d绘图对象，无论我们调用多少次获取的对象都将是相同的对象。
2：绘制方法：
clecrRect(left,top,width,height)清除制定矩形区域，
fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。
fillText（text,x,y）绘制文字；
strokeRect(left,top,width,height)绘制矩形，以strokeStyle绘制边界。
beginPath():开启路径的绘制,重置path为初始状态；
closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线；
moveTo（x，y）：设置绘图其实坐标。
lineTo(x，y);绘制从当前其实位置到x，y直线。
fill（），stroke（），clip（）：在完成绘制的最后的填充和边界轮廓，剪辑区域。
arc（）：绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小；
rect():矩形路径;
drawImage（Imag img）：绘制；
quadraticCurveTo():二次样条曲线路径,参数两个控制点；
bezierCurveTo（）：贝塞尔曲线，参数三个控制点；
createImageData,getImageData，putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data，其中data为我们色素的记录为
argb，所以数组大小长度为widthheight4，顺序分别为rgba。getImageData为获取矩形区域像素，而putImageData则为设置矩形区域像素；
… and so on！
3：坐标变换：
translate（x,y）：平移变换，原点移动到坐标（x，y）；
rotate（a）：旋转变换，旋转a度角；
scale（x，y）：伸缩变换；
save（），restore（）：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态；
最近在制作公司的一个项目时有运用到 canvas 与屏幕坐标互相转换的一个知识点，如果没有进行 canvas 缩放 、 旋转 、 平移 一系列 *** 作时，这个需求还是比较简单的，但是如果 *** 作复杂起来后，要再进行转换，在不知道一些特定api就显得比较困难了，在查阅了了一些资料后解决了这个需求这里分享给大家。
解决这个需求时引用了两个API，分别是 CanvasRenderingContext2DgetTransform() 、
DOMMatrixinvertSelf()
CanvasRenderingContext2DgetTransform() 可以获取当前 canvas 上下文的被应用的转换矩阵，返回 DOMMatrix 对象。
DOMMatrixinvertSelf() 可以获取当前矩阵逆转后的结果，注意这个api是会修改自身矩阵的。
我们通过这两个API可以获取当前canvas的 DOMMatrix ，然后将其逆转，通过逆转后的转换矩阵就可以获取屏幕坐标转对应的canvas坐标了。
CanvasRenderingContext2DgetTransform()
DOMMatrixinvertSelf()
可以看到兼容性还是比较良好的，如果没有要求兼容IE就放心大胆的用吧。
以上就是关于HTML5中如何绘制图表全部的内容，包括:HTML5中如何绘制图表、Canvas&Paint 知识梳理(6) - 绘制路线 Path 基本用法、怎样用canvas在网页上绘制图形等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）