<body>
<!--画板-->
// 当浏览器不支持的时候才会出现文字
<canvas id="canvas" style="background-color: black;">您当前的版本不支持 </canvas>
<script type="text/javascript">
// 拿到画板
var canvas = document.getElementById(‘canvas‘);
canvas.width = 1000;
canvas.height = 1000;
// 拿到上下文
var context = canvas.getContext(‘2d‘);
// 设置线条的颜色
context.strokeStyle = ‘red‘;
// 设置线条的宽度
context.lineWidth = 5;
// 绘制直线
context.beginPath();
// 起点
context.moveTo(200, 200);
// 终点
context.lineTo(500, 200);
context.closePath();
context.stroke();
// 绘制弧线
context.beginPath();
/*
* params
* 圆心x坐标
* 圆心y坐标
* 半径
* 起始角度
* 结束角度
* 方向，true 逆时针 false 顺时针 默认false，不写表示false
*/
context.arc(200,200,100,0,Math.PI/2,false);
context.closePath();
context.stroke();
context.strokeStyle = ‘red‘;
context.arc(200,200,100,0,Math.PI/2, true);
context.closePath();
context.stroke();
</script>
</body>
原文：http://www.cnblogs.com/zhangshan/p/5848613.html