canvas 画线：
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style>
</style> </head>
<body> <canvas id="canvas1" width="1000" height="600" style="border:1px solid #aaa;display:block;margin:50px auto">当前浏览器不支持canva，请更换浏览器后再试 </canvas>
<script> window.onload = function () { var canvas1 = document.getElementById('canvas1'); var context = canvas1.getContext('2d');
// 语句判断当前浏览器是否支持canvas if ( canvas1.getContext("2d") ) { var context = canvas1.getContext("2d") // 绘制状态：位置、宽度、样式 // (x,y):以画布的左侧为原点，x右侧为正，y向下为正 // 1.位置 context.moveTo(100, 100) context.lineTo(400, 400) context.lineTo(300, 100) context.lineTo(100, 100)//回到一开始的位置，就绘制成了多边形
// 2.宽度 context.lineWidth = 5
// 3.样式： context.strokeStyle = "green"
context.stroke()
} else { alert("当前浏览器不支持canvas，请更换浏览器再试") }
}
</script>
</body>
</html>