<div class="wrapper">
  <div class="box">
    
    <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>
  <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;
}
View Compiled
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');
  
  
  // 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();
  });
  
  
  function drawScreen() {
    
    ctx.lineWidth = 20;
    ctx.lineJoin = lineJoin;
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 120);
    ctx.lineTo(150, 30);
    ctx.lineTo(200, 140);
    ctx.lineTo(300, 140);
    ctx.lineTo(350, 40);
    ctx.lineTo(400, 110);
    ctx.lineTo(450, 50);
    ctx.lineTo(500, 160);
    ctx.lineTo(550, 20);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(40, 100);
    ctx.lineTo(80, 190);
    ctx.lineTo(160, 140);
    ctx.lineTo(180, 220);
    ctx.lineTo(320, 220);
    ctx.lineTo(360, 140);
    ctx.lineTo(400, 220);
    ctx.lineTo(440, 130);
    ctx.lineTo(500, 230);
    ctx.lineTo(570, 100);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(20, 180);
    ctx.lineTo(60, 250);
    ctx.lineTo(120, 220);
    ctx.lineTo(160, 280);
    ctx.lineTo(320, 280);
    ctx.lineTo(360, 240);
    ctx.lineTo(420, 270);
    ctx.lineTo(450, 210);
    ctx.lineTo(480, 280);
    ctx.lineTo(540, 280);
    ctx.lineTo(560, 200);
    ctx.stroke();
    ctx.closePath();
    
  }
  drawScreen();  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.