<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="margin:0 auto;"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); context.lineWidth = 10 ; context.strokeStyle = "#005588" ; context.beginPath(); context.moveTo(100,200); context.lineTo(700,200); context.lineCap = "butt"; //正常 不超出 context.stroke(); context.beginPath(); context.moveTo(100,400); context.lineTo(700,400); context.lineCap = "round"; //超出 开始和结尾是圆形 context.stroke(); context.beginPath(); context.moveTo(100,600); context.lineTo(700,600); context.lineCap = "square"; //超出 开始和结尾是方形 context.stroke(); context.lineWidth = 1; context.strokeStyle = "#27a"; context.moveTo(100,100); context.lineTo(100,700); context.moveTo(700,100); context.lineTo(700,700) context.stroke() }else{ alert('当前游览器不支持Canvas，请更换游览器后再试！'); } } </script> </body> <script> /*总结 lineCap butt(default) round square */ </script> </html>