Generalnie za pomocą <canvas> robię sobie trzy warstwy: na obrazek, na bazgroły i na pędzel, no i próbuję to jakoś połączyć.
kolorowanka.html
Kod: Zaznacz cały
<html>
<head>
<title>Fun!</title>
<script language="javascript" type="text/javascript" src="kolorowanka.js"></script>
<link href="kolorowanka.css" type="text/css" rel="stylesheet">
</head>
<body>
<div style="position: relative;">
<canvas id="toplayer" width="600" height="600" style="z-index: 1;"></canvas>
<canvas id="drawlayer" width="600" height="600" style="z-index: 2;"></canvas>
<canvas id="imagelayer" width="600" height="600" style="z-index: 3;"></canvas>
</div>
</body>
</html>Kod: Zaznacz cały
window.onload = function() {
var mousePos = {x: 20, y: 20};
var top_layer_canvas = document.getElementById("toplayer");
var draw_layer_canvas = document.getElementById("drawlayer");
var image_layer_canvas = document.getElementById("imagelayer");
var top_layer_context = document.getElementById("toplayer").getContext("2d");
var draw_layer_context = document.getElementById("drawlayer").getContext("2d");
var image_layer_context = document.getElementById("imagelayer").getContext("2d");
var offsetY = 20;
var offsetX = 20;
var brush_size = 15;
top_layer_canvas.onmousemove = handleMouseMove;
top_layer_canvas.onclick = draw;
setInterval( drawBrush, 10);
function handleMouseMove(event) {
mousePos = {
x: event.clientX - offsetX,
y: event.clientY - offsetY
};
console.log(mousePos);
}
function draw(event) {
alert(mousePos.x + ' ' + mousePos.y);
draw_layer_context.fillStyle = "rgba(0,0,0,0.4)";
draw_layer_context.strokeStyle = "rgba(0,153,255,0.4)";
draw_layer_context.arc(mousePos.x, mousePos.y, brush_size, 0, 2*Math.PI, false);
draw_layer_context.fill();
}
function drawBrush() {
top_layer_context.clearRect(0, 0, top_layer_canvas.width, top_layer_canvas.height);
top_layer_context.fillStyle = "rgba(0,0,0,0.4)";
top_layer_context.strokeStyle = "rgba(0,153,255,0.4)";
top_layer_context.arc(mousePos.x, mousePos.y, brush_size, 0, 2*Math.PI, false);
top_layer_context.fill();
}
}Kod: Zaznacz cały
canvas {
border: 2px solid #000;
float: center;
margin-right: 20px;
margin-bottom: 20px;
position: absolute;
left: 0;
top: 0;
}
