1 <!DOCTYPE html>
2 <html lang='zh-cn'>
3 <head>
4 <title>Insert you title</title>
5 <meta name='description' content='this is my page'>
6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body,canvas,div,select,option {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 background: #666;
21 }
22
23 #wrap {
24 1000px; height: 630px; margin: 15px auto; border-radius: 3px;
25 }
26
27 #can {
28 background: #FFF url('./images/1.jpg') no-repeat center; background-size: cover; display: block;
29 display: block; outline: none; -webkit-outline: none;
30 }
31
32 #translate {
33 margin: 5px auto; 85%; text-align: center;
34 }
35
36 label {
37 font: 400 13px/1.2em 'Courier New'; color: #FFF; cursor: pointer;
38 }
39
40 input,select {
41 color: #000; font: 400 11px/1.2em 'Courier New'; padding: 2px 8px; vertical-align: middle;
42 }
43 </style>
44
45 </head>
46 <body onload='drawImage();'>
47 <div id='wrap'>
48 <canvas id='can' width='1000' height='600'>检测到您的浏览器版本过低请升级您的浏览器以获取更好的用户体验...</canvas>
49 <div id='translate'>
50 <label for='#content'>请输入您关心的内容:</label>
51 <input type='text' id='content' placeholder='请输入您关心的内容' autocomplete='on' autofocus="autofocus" />
52 <label for='select'>请选择您喜欢的背景:</label>
53 <select id='select'>
54 <option>1.jpg</option>
55 <option>2.jpg</option>
56 <option>3.jpg</option>
57 <option>4.jpg</option>
58 <option>5.jpg</option>
59 <option>6.jpg</option>
60 </select>
61 </div>
62 </div>
63 </body>
64 <script type='text/javascript'>
65 var oDiv = $( '#wrap' );
66 var can = $( '#can' ).get( 0 );
67 var oCan = can.getContext( '2d' );
68 var oContent = $( '#content' ).get( 0 );
69 var oSelect = $( '#select' ).get( 0 );
70 oContent.onkeydown = function(){
71 oCan.clearRect( 0 , 0 , can.width , can.height );
72 this.onkeyup = function(){
73 var text = oContent.value;
74 var num = Math.ceil( can.width / text.length ) < 40 ? 40 : Math.ceil( can.width
75 / text.length );
76 oCan.font = '900 ' + num + 'px Courier New';
77 oCan.fillStyle = getRandomColor();
78 oCan.textAlign = 'center';
79 oCan.textBaseline = 'middle';
80 oCan.fillText( text , can.width / 2 , can.height / 2 );
81 };
82 };
83 function getRandomColor(){
84 var setFillSeat = '';
85 var str = '0xFFFFFF'; /* 在这里不要使用 "#" */
86 var num = ( Math.floor( Math.random() * parseInt( str , 16 ) ) ).toString( 16 )
87 .toLocaleUpperCase();
88 var length = num.length;
89 for( var i = 0 ; i < 6 - length ; i++ ){
90 setFillSeat += 0;
91 }
92 return '#' + num + setFillSeat;
93 }
94 function drawImage(){
95 for( var i = 0 ; i < oSelect.children.length ; i++ ){
96 oSelect.children[ i ].index = i;
97 oSelect.children[ i ].onclick = function(){
98 can.style.background = 'url(./images/' + ( this.index + 1 )
99 + '.jpg) no-repeat center';
100 }
101 }
102 }
103 </script>
104 </html>