Записи

<table align="center" border="0" cellspacing="0" width="500" class="colorborder">
 <tr>
 <td align="center">
 обои для рабочего стола
 </td></tr>
 <tr><td align="center">
картинка в центре
 </td></tr>
 <tr><td align="center">
<input id="v39idPcx1" name="35" type="radio" checked="checked" /> 
<img src="/pdf/imgwall/andy1.bmp" id="v39primer1" align="left" hidden>
<input id="v39idPcx2" name="35" type="radio" /> 
<img src="/pdf/imgwall/elen1.bmp" id="v39primer2" align="left" hidden>
<input id="v39idPcx3" name="35" type="radio" /> 
<img src="/pdf/imgwall/john1.bmp" id="v39primer3" align="left" hidden>
<input id="v39idPcx4" name="35" type="radio" /> 
<img src="/pdf/imgwall/lucy1.bmp" id="v39primer4" align="left" hidden>
<input id="v39idPcx5" name="35" type="radio" /> 
<img src="/pdf/imgwall/mari1.bmp" id="v39primer5" align="left" hidden>
<input id="v39idPcx6" name="35" type="radio" /> 
<img src="/pdf/imgwall/pc1.bmp" id="v39primer6" align="left" hidden>
<input id="v39idPcx7" name="35" type="radio" /> 
<img src="/pdf/imgwall/serg1.bmp" id="v39primer7" align="left" hidden>
<input id="v39idPcx8" name="35" type="radio" /> 
<img src="" id="v39primer8" align="left" hidden>
 </td></tr>
 <tr><td align="center">
<label for="v39openfile">Загрузить картинку:</label>
 </td></tr>
 <tr><td align="center">
<input type="file" id="v39openfile" onchange="v39readURL(this); document.getElementById('v39idPcx8').checked = true;">
 </td></tr>
 <tr><td align="center">
<canvas id="v39myCanvas" width="500" height="500" ></canvas>
 </td></tr>
 <tr><td align="center">
цвет фона
 </td></tr>
 <tr><td align="center">
<input id="v39idClr1" name="37" type="radio" checked="checked" /> 
<input id="v39idClr2" name="37" type="radio" /> 
<input id="v39idClr3" name="37" type="radio" /> 
<input id="v39idClr4" name="37" type="radio" /> 
<input id="v39idClr5" name="37" type="radio" /> 
<input id="v39idClr6" name="37" type="radio" /> 
<input id="v39idClr7" name="37" type="radio" /> 
<input id="v39idClr8" name="37" type="radio" /> 
 </td></tr>
 <tr><td align="center">
разрешение экрана
 </td></tr>
 <tr><td align="center">
<input id="v39idScr1" name="39" type="radio" checked="checked" /> 
1920x1080
<input id="v39idScr2" name="39" type="radio" /> 
1600x900
<input id="v39idScr3" name="39" type="radio" /> 
1280x1024
 </td></tr>
 <tr><td align="center">
 <button onclick="v39saveURL();">сохранить файл</button>
 </td></tr>
 <tr><td align="center">
 <canvas id="v392myCanvas" width="800" height="800" hidden></canvas>
 </td></tr>
</table>

<script>
function v39saveURL() {
var canvas = document.getElementById("v392myCanvas");
var dataURL = canvas.toDataURL("image/png");
var newTab = window.open('about:blank','image from canvas');
newTab.document.write("<img src='" + dataURL + "' alt='from canvas'/>");
}
function v39readURL(input) {
 if (input.files && input.files[0]) {
 var reader = new FileReader();
 reader.onload = function (e) {
 $('#v39primer8')
 .attr('src', e.target.result);
 };
 reader.readAsDataURL(input.files[0]);
 }
}
</script>
<script>
////////////////////////////////////////////2
var v39canvas = document.querySelector('#v39myCanvas');
var v39context = v39canvas.getContext('2d');
function v39update() {
 v39canvas.width = 500;
 v39canvas.height = 400;
//
 v39context.clearRect(0, 0, v39canvas.width, v39canvas.height);
//
 v39context.beginPath();
 if (document.getElementById('v39idClr1').checked) v39context.fillStyle = "#FF0000";
 if (document.getElementById('v39idClr2').checked) v39context.fillStyle = "#00FF00";
 if (document.getElementById('v39idClr3').checked) v39context.fillStyle = "#0000FF";
 if (document.getElementById('v39idClr4').checked) v39context.fillStyle = "#FFFF00";
 if (document.getElementById('v39idClr5').checked) v39context.fillStyle = "#00FFFF";
 if (document.getElementById('v39idClr6').checked) v39context.fillStyle = "#FF00FF";
 if (document.getElementById('v39idClr7').checked) v39context.fillStyle = "#AAAAAA";
 if (document.getElementById('v39idClr8').checked) v39context.fillStyle = "#555555";
 v39context.fillRect(0, 0, v39canvas.width, v39canvas.height);
 v39context.fill();
 v39context.closePath();
// 
 if (document.getElementById('v39idPcx1').checked) v39context.drawImage(document.getElementById('v39primer1'),
 (v39canvas.width-document.getElementById('v39primer1').width)/2, (v39canvas.height-document.getElementById('v39primer1').height)/2,
 document.getElementById('v39primer1').width, document.getElementById('v39primer1').height);
 if (document.getElementById('v39idPcx2').checked) v39context.drawImage(document.getElementById('v39primer2'),
 (v39canvas.width-document.getElementById('v39primer2').width)/2, (v39canvas.height-document.getElementById('v39primer2').height)/2,
 document.getElementById('v39primer2').width, document.getElementById('v39primer2').height);
 if (document.getElementById('v39idPcx3').checked) v39context.drawImage(document.getElementById('v39primer3'),
 (v39canvas.width-document.getElementById('v39primer3').width)/2, (v39canvas.height-document.getElementById('v39primer3').height)/2,
 document.getElementById('v39primer3').width, document.getElementById('v39primer3').height);
 if (document.getElementById('v39idPcx4').checked) v39context.drawImage(document.getElementById('v39primer4'),
 (v39canvas.width-document.getElementById('v39primer4').width)/2, (v39canvas.height-document.getElementById('v39primer4').height)/2,
 document.getElementById('v39primer4').width, document.getElementById('v39primer4').height);
 if (document.getElementById('v39idPcx5').checked) v39context.drawImage(document.getElementById('v39primer5'),
 (v39canvas.width-document.getElementById('v39primer5').width)/2, (v39canvas.height-document.getElementById('v39primer5').height)/2,
 document.getElementById('v39primer5').width, document.getElementById('v39primer5').height);
 if (document.getElementById('v39idPcx6').checked) v39context.drawImage(document.getElementById('v39primer6'),
 (v39canvas.width-document.getElementById('v39primer6').width)/2, (v39canvas.height-document.getElementById('v39primer6').height)/2,
 document.getElementById('v39primer6').width, document.getElementById('v39primer6').height);
 if (document.getElementById('v39idPcx7').checked) v39context.drawImage(document.getElementById('v39primer7'),
 (v39canvas.width-document.getElementById('v39primer7').width)/2, (v39canvas.height-document.getElementById('v39primer7').height)/2,
 document.getElementById('v39primer7').width, document.getElementById('v39primer7').height);
 if (document.getElementById('v39idPcx8').checked) v39context.drawImage(document.getElementById('v39primer8'),
 (v39canvas.width-document.getElementById('v39primer8').width)/2, (v39canvas.height-document.getElementById('v39primer8').height)/2,
 document.getElementById('v39primer8').width, document.getElementById('v39primer8').height);
//
 requestAnimationFrame(v39update);
} 
////////////////////////////////////////////2
////////////////////////////////////////////2
var v392canvas = document.querySelector('#v392myCanvas');
var v392context = v392canvas.getContext('2d');
function v392update() {
 if (document.getElementById('v39idScr1').checked) v392canvas.width = 1920;
 if (document.getElementById('v39idScr1').checked) v392canvas.height = 1080;
 if (document.getElementById('v39idScr2').checked) v392canvas.width = 1600;
 if (document.getElementById('v39idScr2').checked) v392canvas.height = 900;
 if (document.getElementById('v39idScr3').checked) v392canvas.width = 1280;
 if (document.getElementById('v39idScr3').checked) v392canvas.height = 1024;
 //
 v392context.clearRect(0, 0, v392canvas.width, v392canvas.height);
//
 v392context.beginPath();
 if (document.getElementById('v39idClr1').checked) v392context.fillStyle = "#FF0000";
 if (document.getElementById('v39idClr2').checked) v392context.fillStyle = "#00FF00";
 if (document.getElementById('v39idClr3').checked) v392context.fillStyle = "#0000FF";
 if (document.getElementById('v39idClr4').checked) v392context.fillStyle = "#FFFF00";
 if (document.getElementById('v39idClr5').checked) v392context.fillStyle = "#00FFFF";
 if (document.getElementById('v39idClr6').checked) v392context.fillStyle = "#FF00FF";
 if (document.getElementById('v39idClr7').checked) v392context.fillStyle = "#AAAAAA";
 if (document.getElementById('v39idClr8').checked) v392context.fillStyle = "#555555";
 v392context.fillRect(0, 0, v392canvas.width, v392canvas.height);
 v392context.fill();
 v392context.closePath();
//
 if (document.getElementById('v39idPcx1').checked) v392context.drawImage(document.getElementById('v39primer1'),
 (v392canvas.width-document.getElementById('v39primer1').width)/2, (v392canvas.height-document.getElementById('v39primer1').height)/2,
 document.getElementById('v39primer1').width, document.getElementById('v39primer1').height);
 if (document.getElementById('v39idPcx2').checked) v392context.drawImage(document.getElementById('v39primer2'),
 (v392canvas.width-document.getElementById('v39primer2').width)/2, (v392canvas.height-document.getElementById('v39primer2').height)/2,
 document.getElementById('v39primer2').width, document.getElementById('v39primer2').height);
 if (document.getElementById('v39idPcx3').checked) v392context.drawImage(document.getElementById('v39primer3'),
 (v392canvas.width-document.getElementById('v39primer3').width)/2, (v392canvas.height-document.getElementById('v39primer3').height)/2,
 document.getElementById('v39primer3').width, document.getElementById('v39primer3').height);
 if (document.getElementById('v39idPcx4').checked) v392context.drawImage(document.getElementById('v39primer4'),
 (v392canvas.width-document.getElementById('v39primer4').width)/2, (v392canvas.height-document.getElementById('v39primer4').height)/2,
 document.getElementById('v39primer4').width, document.getElementById('v39primer4').height);
 if (document.getElementById('v39idPcx5').checked) v392context.drawImage(document.getElementById('v39primer5'),
 (v392canvas.width-document.getElementById('v39primer5').width)/2, (v392canvas.height-document.getElementById('v39primer5').height)/2,
 document.getElementById('v39primer5').width, document.getElementById('v39primer5').height);
 if (document.getElementById('v39idPcx6').checked) v392context.drawImage(document.getElementById('v39primer6'),
 (v392canvas.width-document.getElementById('v39primer6').width)/2, (v392canvas.height-document.getElementById('v39primer6').height)/2,
 document.getElementById('v39primer6').width, document.getElementById('v39primer6').height);
 if (document.getElementById('v39idPcx7').checked) v392context.drawImage(document.getElementById('v39primer7'),
 (v392canvas.width-document.getElementById('v39primer7').width)/2, (v392canvas.height-document.getElementById('v39primer7').height)/2,
 document.getElementById('v39primer7').width, document.getElementById('v39primer7').height);
 if (document.getElementById('v39idPcx8').checked) v392context.drawImage(document.getElementById('v39primer8'),
 (v392canvas.width-document.getElementById('v39primer8').width)/2, (v392canvas.height-document.getElementById('v39primer8').height)/2,
 document.getElementById('v39primer8').width, document.getElementById('v39primer8').height);
// 
 requestAnimationFrame(v392update);
} 
 v39update(); v392update();
</script>