Доброго времени суток! У меня есть релиз рисовалки на js, хотел бы внести в неё некоторые изменения. Рисовалка сейчас:
<!DOCTYPE html>
<html>
<head>
<style>
.color {
width: 15px;
height: 15px;
display: inline-block;
padding: 1px;
cursor: pointer;
border: solid 1px #fff;
}
.color:hover {
border: solid 1px #f00;
}
.color:active {
border: solid 1px #ff0;
}
.button {
height: 45px;
border: 2px dotted black;
background: lightgrey;
}
#palette, #canvas {
display: inline-block;
border: solid 1px #aaa;
cursor: default;
vertical-align: top;
}
#palette {
width: 95px;
}
#clear {
background: #eee;
color: #777;
padding: 10px;
width: 200px;
text-align: center;
margin: 15px auto;
cursor: pointer;
}
.container {
white-space: normal;
width: 710px;
}
</style>
<script>
window.addEventListener("load", function onWindowLoad() {
generatePalette(document.getElementById("palette"));
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.lineCap = "round";
context.lineWidth = 8;
document.getElementById("clear").onclick = function clear() {
context.clearRect(0, 0, canvas.width, canvas.height);
};
canvas.onmousemove = function drawIfPressed (e) {
var x = e.offsetX;
var y = e.offsetY;
var dx = e.movementX;
var dy = e.movementY;
if (e.buttons > 0) {
context.beginPath();
context.moveTo(x, y);
context.lineTo(x - dx, y - dy);
context.stroke();
context.closePath();
}
};
function generatePalette(palette) {
for (var r = 0, max = 4; r <= max; r++) {
for (var g = 0; g <= max; g++) {
for (var b = 0; b <= max; b++) {
var paletteBlock = document.createElement('div');
paletteBlock.className = 'color';
paletteBlock.addEventListener('click', function changeColor(e) {
context.strokeStyle = e.target.style.backgroundColor;
});
paletteBlock.style.backgroundColor = (
'rgb(' + Math.round(r * 255 / max) + ", "
+ Math.round(g * 255 / max) + ", "
+ Math.round(b * 255 / max) + ")"
);
palette.appendChild(paletteBlock);
}
}
}
}
});
</script>
</head>
<body>
<div class="container">
<canvas id='canvas' width="600" height="600">Ваш браузер устарел!</canvas>
<div id="palette"></div>
<button id="clear" class="button">Очистить изображение</button>
<button id="save" onclick="saveImg()" class="button">Сохранить изображение</button>
<span>Толщина</span><input type="range" id="width" min="1" max="20" value="8" step="1">
</div>
</body>
</html>
Зашёл в тупик. А именно ну никак не могу придумать механизм конвертирования canvas'ной графики в png, jpg или svg. Такое вообще возможно? Где можно почитать об таких превращениях? А еще как варьировать lineWidth, если ползунок в FF отображается странно
Прошу направить в нужное русло
