定义和用法
<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
属性 描述
height：设置 canvas 的高度，width：设置 canvas 的宽度。
定义和用法
getContext("2d") 方法返回一个用于在画布上绘图的环境。

body中创建canvas标签

<canvas id="canvas" width="200" height="200">你的设备不支持canvas标签，请下载最新版本浏览器<canvas>

在脚本中写入

<script>
var canvas = documemt.getElementById("canvas");
var cxt = canvas.getContext("2d");// 获取上下文对象（画笔）
cxt.beginPath();//开始绘制
cxt.moveTo(50,50);//设置开始点
cxt.lineTo(100,100);//放置点
cxt.lineWidth = 20;//设置线的宽度
cxt.strokeStyle = "red";//设置线的颜色
cxt.lineJoin = "round";//设置线变成圆角
cxt.lineCap = "round";
cxt.closePath();//绘制结束
</script>