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