Sublime Text
01首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布
02然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可
03接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要操作的内容都在里面
04然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可
05接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示
06最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下
07当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可
最近项目中的设计图上有一条曲线设计风格，就想着能不用切图的方法实现吗？（毕竟切图好讨厌的 (≧▽≦)/ ）。就研究了一下实现方式。在此，给大家做一下参考。
大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。
1.首先我们先建一个 div 元素
2.给它一些基本样式
最终效果：
从效果上看，这个方法实现的曲线过渡处不够平滑，仍存在较大缺陷。下面就介绍两个更加常用的方法。
在搜索实现方案的过程中，发现一个好用的 工具 ,可以用它来调试出复杂的曲线。根据设计稿的线条，很快就调试出来一个svg的路径参数。
接着，修饰一下该曲线，就能得到我们所需要的效果了。
最终效果如图：
发现Canvas真的是个好东西，可以用前端实现很多特效。当然画个曲线对于它来说，简直小菜一碟。
这里会用到贝塞尔曲线（bezierCurve)的一些知识。该曲线会利用到四个点作为定位点，分别为头和尾点还有两个控制点用来控制整个曲线的形状和曲率。具体可以参考 维基百科 上的相关介绍。
1.创建一个 canvas 元素
2.利用 bezierCurveTo 这个方法来画该曲线。由于这个方法相关参数难以确定，我同样选择了一个 工具 来获取所需要的具体参数数值。
至此，我们就得到了我们想要的曲线了。
How to Draw Quadratic Curves on an HTML5 Canvas
在线SVG编辑器
MDN SVG Tutorial
图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过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 = document.getElementById('canvas'),
context = null
context = canvas.getContext('2d')
var img = new Image()
img.src ='chart-background.png'//这里是一张具有图表背景的图片
// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
img.onload = function() {
//绘制图片
context.drawImage(img, 0, 0)
//绘制直线
context.beginPath()
context.moveTo(70, 105)
context.lineTo(105, 132)
context.lineTo(142, 250)
context.lineTo(176, 175)
context.lineTo(212, 145)
context.lineTo(245, 197)
context.lineTo(280, 90)
context.stroke()
}
</script>
<script src="jquery.js"></script>
</body>
</html>
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
