<div class="wrapper">
  <div class="box">
    <div class="control">
      <label for="lineCap">lineCap:</label>
      <select name="lineCap" id="lineCap">
        <option value="butt">butt</option>
        <option value="square">square</option>
        <option value="round">round</option>
      </select>
    </div>
  </div>
  <canvas id="myCanvas" width="600" height="300"></canvas>
</div>

input[type="text"],select {
  width: 100px;
  display: inline-block;
  border: 1px solid #cfd9db;
  background-color: #ffffff;
  border-radius: .25em;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
  
  &:focus {
    outline: none;
    border-color: #2c97de;
    box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
  }
  &:focus{
    outline: none;
    border-color: #2c97de;
    box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
  }
  
}
input[type="text"]{
  padding: 5px;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px  rgba(0,0,0,.15);
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.control {
  margin: 0 5px;
}

canvas {
  border: 1px solid #999;
}

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded () {
  canvasApp(); //包含整个Canvas应用程序
}
function canvasSupport (e) {
  
	  return !!e.getContext;

}
function canvasApp () {
  var myCanvas = document.getElementById('myCanvas');

  if (!canvasSupport(myCanvas)) {
	  return; 
	}
  
  var ctx = myCanvas.getContext('2d');
  
  // lineCap change options
  var eleCap = document.getElementById('lineCap'),
      index = eleCap.selectedIndex,
      lineCap = eleCap.options[index].value;

  eleCap.addEventListener('change',function(){
    lineCap = eleCap.options[eleCap.selectedIndex].value;
    ctx.clearRect(0, 0, 600, 300);
    drawScreen();
  });
  
  
  
  function drawScreen() {
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#f36';
    ctx.beginPath();
    ctx.moveTo(80,20);
    ctx.lineTo(80,280);
    ctx.stroke();
    ctx.closePath();
    
    ctx.lineWidth = 30;
    ctx.lineCap = lineCap;
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.moveTo(81, 80);
    ctx.lineTo(520, 80);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(81, 160);
    ctx.lineTo(520, 160);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(81, 240);
    ctx.lineTo(520, 240);
    ctx.stroke();
    ctx.closePath();
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#f36';
    ctx.beginPath();
    ctx.moveTo(520,20);
    ctx.lineTo(520,280);
    ctx.stroke();
    ctx.closePath();
    
  }
  drawScreen();  
}