mirror of
https://github.com/sorenisanerd/gotty.git
synced 2024-12-24 16:07:30 +00:00
72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Test SWCanvas</title>
|
||
|
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||
|
|
<script src="swcanvas.js"></script>
|
||
|
|
<script>
|
||
|
|
$( window ).load(function() {
|
||
|
|
var img = new Image();
|
||
|
|
img.src = 'cat.jpg';
|
||
|
|
img.onload = function() {
|
||
|
|
var canvas = $('#canvas')[0];
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
ctx.drawImage(this, 0, 0);
|
||
|
|
|
||
|
|
//extract subimage
|
||
|
|
var imgDataOriginal = ctx.getImageData(10, 10, 100, 100);
|
||
|
|
|
||
|
|
//swcanvas!
|
||
|
|
var swcanvas = new SWCanvas(canvas);
|
||
|
|
//the canvas is already filled, so flushback to fill it with the canvas
|
||
|
|
swcanvas.flushBack();
|
||
|
|
|
||
|
|
//check getImageData
|
||
|
|
var imgDataSW = swcanvas.getImageData(10, 10, 100, 100);
|
||
|
|
|
||
|
|
$('#canvasOriginal')[0].getContext('2d').putImageData(imgDataOriginal, 0, 0);
|
||
|
|
$('#canvasSW')[0].getContext('2d').putImageData(imgDataSW, 0, 0);
|
||
|
|
|
||
|
|
$('#canvasOriginalPut')[0].getContext('2d').putImageData(imgDataOriginal, 100, 100);
|
||
|
|
|
||
|
|
//another swcanvas
|
||
|
|
var swcanvasput = new SWCanvas($('#canvasSWPut')[0]);
|
||
|
|
swcanvasput.flushBack();
|
||
|
|
|
||
|
|
swcanvasput.putImageData(imgDataOriginal, 100, 100);
|
||
|
|
swcanvasput.flush();
|
||
|
|
|
||
|
|
//fillrect
|
||
|
|
var ctxFill = $('#canvasOriginalFill')[0].getContext('2d');
|
||
|
|
ctxFill.fillStyle = 'red';
|
||
|
|
ctxFill.fillRect(100, 100, 100, 100);
|
||
|
|
|
||
|
|
//fill sw
|
||
|
|
var swcanvasFill = new SWCanvas($('#canvasSWFill')[0]);
|
||
|
|
swcanvasFill.flushBack();
|
||
|
|
|
||
|
|
swcanvasFill.fillRect(255, 0, 0, 100, 100, 100, 100);
|
||
|
|
swcanvasFill.flush();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
cat:
|
||
|
|
<canvas id="canvas" width="300" height="300"></canvas>
|
||
|
|
original:
|
||
|
|
<canvas id="canvasOriginal" width="100" height="100"></canvas>
|
||
|
|
sw:
|
||
|
|
<canvas id="canvasSW" width="100" height="100"></canvas>
|
||
|
|
original putimagedata:
|
||
|
|
<canvas id="canvasOriginalPut" width="300" height="300" style="border:1px solid red"></canvas>
|
||
|
|
sw putimagedata:
|
||
|
|
<canvas id="canvasSWPut" width="300" height="300" style="border:1px solid red"></canvas>
|
||
|
|
<br/><br/><br/><br/>
|
||
|
|
original fillrect:
|
||
|
|
<canvas id="canvasOriginalFill" width="300" height="300" style="border:1px solid blue"></canvas>
|
||
|
|
sw fillrect:
|
||
|
|
<canvas id="canvasSWFill" width="300" height="300" style="border:1px solid blue"></canvas>
|
||
|
|
</body>
|
||
|
|
</html>
|