mirror of
https://github.com/servo/servo.git
synced 2025-06-12 18:34:39 +00:00
165 lines
3.8 KiB
HTML
165 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
<style type=''>
|
|
html {
|
|
font-family: helvetica, sans-serif;
|
|
}
|
|
|
|
canvas {
|
|
padding: 15px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.example {
|
|
display: inline-block;
|
|
width: 280px;
|
|
margin-top: 50px;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
}
|
|
|
|
.description {
|
|
width: 100%;
|
|
}
|
|
|
|
.description div {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.description .source {
|
|
width: 100px;
|
|
}
|
|
|
|
.description .target {
|
|
width: 100px;
|
|
}
|
|
|
|
.example-title {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<h1 class="title">Timed DrawImage canvas to canvas</h1>
|
|
<h4 class="title", id="Test Result">This text is where the timing result will go...</h4>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var smoothingEnabled = false;
|
|
var examplesNum = 0;
|
|
|
|
var imageSource = {
|
|
width: 50,
|
|
height: 50
|
|
};
|
|
|
|
var destCanvas = {
|
|
width: 100,
|
|
height: 100
|
|
};
|
|
|
|
var t0 = performance.now(); //save starting time
|
|
drawImage(25, 25); // The source canvas will copied to the 25,25 position of the destination canvas
|
|
var t1 = performance.now(); //save ending time
|
|
document.getElementById('Test Result').innerHTML = "DrawImage took " + (t1 - t0) + " milliseconds."; //print to browser
|
|
console.log("DrawImage took " + (t1 - t0) + " milliseconds."); //print to console
|
|
|
|
function renderExample(title) {
|
|
var container = document.createElement('div');
|
|
container.id = 'example' + examplesNum++;
|
|
container.setAttribute('class', 'example');
|
|
|
|
var h2 = document.createElement('h2');
|
|
h2.textContent = title;
|
|
h2.setAttribute('class', 'example-title');
|
|
container.appendChild(h2);
|
|
|
|
var div1 = document.createElement('div');
|
|
var canvas1 = document.createElement('canvas');
|
|
var canvas2 = document.createElement('canvas');
|
|
div1.appendChild(canvas1);
|
|
div1.appendChild(canvas2);
|
|
container.appendChild(div1);
|
|
|
|
var div2 = document.createElement('div');
|
|
div2.setAttribute('class', 'description');
|
|
var source = document.createElement('div');
|
|
source.textContent = ' Source (' + imageSource.width + ',' + imageSource.height + ')';
|
|
source.setAttribute('class', 'source');
|
|
|
|
var arrow = document.createElement('div');
|
|
arrow.textContent = ' -> ';
|
|
arrow.setAttribute('class', 'arrow');
|
|
|
|
var target = document.createElement('div');
|
|
target.textContent = 'Target (' + destCanvas.width + ',' + destCanvas.height + ')';
|
|
target.setAttribute('class', 'target');
|
|
|
|
div2.appendChild(source);
|
|
div2.appendChild(arrow);
|
|
div2.appendChild(target);
|
|
container.appendChild(div2);
|
|
|
|
return container;
|
|
}
|
|
|
|
function drawImage() {
|
|
var args = Array.prototype.slice.call(arguments);
|
|
|
|
var div = renderExample('drawImage(' + args.toString() + ')');
|
|
var canvasEls = div.querySelectorAll('canvas');
|
|
var canvas1 = canvasEls[0];
|
|
var canvas2 = canvasEls[1];
|
|
|
|
canvas1.width = imageSource.width;
|
|
canvas1.height = imageSource.height;
|
|
|
|
var ctx1 = canvas1.getContext('2d');
|
|
ctx1.fillStyle = "#00FFFF";
|
|
ctx1.fillRect(0, 0, imageSource.width, imageSource.height);
|
|
|
|
ctx1.fillStyle = "#000000";
|
|
ctx1.fillRect(5,5,40,40);
|
|
ctx1.clearRect(10,10,30,30);
|
|
ctx1.strokeRect(15,15,20,20);
|
|
|
|
canvas2.width = destCanvas.width;
|
|
canvas2.height = destCanvas.height;
|
|
|
|
var ctx2 = canvas2.getContext('2d');
|
|
ctx2.fillStyle = "#FF0000";
|
|
ctx2.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
|
ctx2.imageSmoothingEnabled = smoothingEnabled;
|
|
|
|
args.unshift(canvas1);
|
|
try {
|
|
ctx2.drawImage.apply(ctx2, args);
|
|
}
|
|
catch(err) {
|
|
var title = div.querySelector('.example-title');
|
|
var error = document.createElement('h2');
|
|
error.setAttribute('class', 'example-title error');
|
|
div.insertBefore(error, title);
|
|
error.textContent += "Call Failed: " + err.message;
|
|
}
|
|
|
|
document.body.appendChild(div);
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|