使用Html控件canvas，利用JavaScript自定义绘图
效果图如下：
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="350" style="border:4px solid #000;"/>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 1.画线段
context.beginPath();
context.moveTo(10,10);
context.lineTo(280,10);
context.lineWidth = 8;
context.strokeStyle = "#00f";
context.stroke();
context.closePath();
// 2.画圆框
context.beginPath();
context.arc(60,80,50,0,360,false);
context.lineWidth = 4;
context.strokeStyle = "#f00";
context.stroke();
context.closePath();
// 画实心圆
context.beginPath();
context.arc(60,180,50,0,360,false);
context.fillStyle = "#00f";
context.fill();
context.closePath();
// 3.画矩形框
context.beginPath();
context.strokeRect(150,40,100,50);
context.closePath();
// 画实心矩形
context.beginPath();
context.fillRect(150,90,100,50);
context.closePath();
// 4.添加图片
context.beginPath();
var image = new Image();
image.src = "http://avatar.csdn.net/5/3/C/1_qq_32115439.jpg";
context.drawImage(image,150,160,100,100);
context.closePath();
// 5.添加文字
context.beginPath();
context.font = "60px 宋体";
context.fillText("lioil.win",10,320,280);
context.closePath();
</script>
</body>
</html>
简书: http://www.jianshu.com/p/9e495ea9aea6
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/72582063
GitHub博客：http://lioil.win/2017/05/20/JS_Html_Canvas.html
Coding博客：http://c.lioil.win/2017/05/20/JS_Html_Canvas.html
