<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 class="control">
      <label for="lineJoin">lineJoin:</label>
      <select name="lineJoin" id="lineJoin">
        <option value="miter">miter</option>
        <option value="bevel">bevel</option>
        <option value="round">round</option>
      </select>
    </div>
    <div class="control">
      <label for="miterLimit">miterLimit:</label>
      <input type="text" name="miterLimit" value="10" id="miterLimit"/>
    </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();
  });
  
  // lineJoin change opations
  var eleJoin = document.getElementById('lineJoin'),
      index = eleJoin.selectedIndex,
      lineJoin = eleJoin.options[index].value;
  
  eleJoin.addEventListener('change',function(){
    lineJoin = eleJoin.options[eleJoin.selectedIndex].value;
    ctx.clearRect(0, 0, 600, 300);
    drawScreen();
  });
  
  // Change miterLimit Value
  var eleMiterLimit = document.getElementById('miterLimit');
  var miterLimit = eleMiterLimit.value;
  eleMiterLimit.addEventListener('input', function(){
    miterLimit = eleMiterLimit.value;
    ctx.clearRect(0, 0, 600, 300);
    drawScreen();
    console.log(miterLimit);
  });
  
  function drawScreen() {
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#f36';
    ctx.beginPath();
    ctx.moveTo(20,36);
    ctx.lineTo(580,36);
    ctx.stroke();
    ctx.closePath();
    
    ctx.lineWidth = 20;
    ctx.lineCap = lineCap;
    ctx.lineJoin = lineJoin;
    ctx.miterLimit = miterLimit;
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.moveTo(50, 80);
    ctx.lineTo(150, 50);
    ctx.lineTo(130, 250);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(220, 80);
    ctx.lineTo(320, 50);
    ctx.lineTo(300, 250);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(400, 80);
    ctx.lineTo(500, 50);
    ctx.lineTo(480, 250);
    ctx.stroke();
    ctx.closePath();
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#f36';
    ctx.beginPath();
    ctx.moveTo(20,252);
    ctx.lineTo(580,252);
    ctx.stroke();
    ctx.closePath();
    
  }
  drawScreen();  
}