1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<html>
<!--
/****************************************************************************
**
** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
** Contact: Qt Software Information (qt-info@nokia.com)
**
** This file is part of the Graphics Dojo project on Qt Labs.
**
** This file may be used under the terms of the GNU General Public
** License version 2.0 or 3.0 as published by the Free Software Foundation
** and appearing in the file LICENSE.GPL included in the packaging of
** this file. Please review the following information to ensure GNU
** General Public Licensing requirements will be met:
** http://www.fsf.org/licensing/licenses/info/GPLv2.html and
** http://www.gnu.org/copyleft/gpl.html.
**
** If you are unsure which license is appropriate for your use, please
** contact the sales department at qt-sales@nokia.com.
**
** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
**
****************************************************************************/
-->
<head>
<style>
div { display: block; margin-left:0px; width: 275px;}
input[type="text"] {
-webkit-border-radius: 10px;
padding: 3px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#99cc99), to(#88ee88));
color: white;
-webkit-text-stroke: 1px rgba(0,0,0,0.4);
font-size: 24px;
margin:0px;
border-width: 2px;
border-color: rgba(0,0,0,0.5);
}
</style>
<script>
function renderElement(selector, onLoad) {
var img = new Image;
img.onload = function() { onLoad(img); };
img.src = "render:"+escape(selector)+"?"+(new Date().getTime());
}
function rerender()
{
var canvas = document.getElementById("canvas");
renderElement('input[type="text"]', function(img) {
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "white";
ctx.globalAlpha = 1;
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.globalAlpha = 0.5;
ctx.translate(canvas.width,canvas.height);
ctx.rotate(Math.PI);
ctx.drawImage(img,0,0);
ctx.restore();
document.getElementById("image").src = img.src;
});
}
</script>
</head>
<body onload="document.getElementById('input').focus()" />
<div>
<form>
Type something: <input type="text" id="input" onkeydown="setTimeout(rerender,0)"/>
<canvas id="canvas" width="320" height=240"></canvas>
</form>
</div>
</body>
</html>
|
