<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;
}
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');
// 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();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.