1.新建test.html文件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>人脉地图</title>
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if lte IE 9]>
<script src="js/excanvas.js"></script>
<!--[if gt IE 9]><!-->
<![endif]-->
<script>
(function($){
$(window).on('load', function(){
getline();
drawarc();
});
})(jQuery);
function getline(){
var myCanvas = document.getElementById("box1");
var context = myCanvas.getContext("2d");
context.strokeStyle = "blue";
context.lineWidth = 1;
context.beginPath();
context.strokeRect(0,0,300,200);
context.strokeStyle = "red";
context.moveTo(50,50);
context.lineTo(100,100);
context.stroke();
}
function drawarc(){
var c = document.getElementById("box1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 1;
//画圈
ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id = "box1">Canvas画线技巧</canvas>
</body>
</html>
2.下载jquery.js ,excanvas.js放入到js文件夹下