motek
злой как @
- Регистрация
- 13.04.2010
- Сообщения
- 730
если просто побаловаться - демо страничка тут
а если интересно - то вот код:
а если интересно - то вот код:
Код:
<!DOCTYPE HTML>
<html>
<head>
<title>разукрашка</title>
<meta charset="utf-8"/>
<style>
h1 { float:right; margin-right: 250px; }
canvas { border: 1px solid #ccc; cursor: crosshair; display: block; }
input { margin-left: 820px; }
</style>
</head>
<body>
<h1>Порисуем?</h1>
<canvas height="500" width="800"></canvas>
<input type="button" value="очистить" onclick="window.location.reload()"/>
<script>
var ctx = document.querySelector('canvas').getContext('2d');
ctx.lineWidth = 5;
ctx.lineCap = 'round';
var drawing = false;
ctx.canvas.onmousedown = function () {
drawing = true;
var r = ~~(Math.random() * 255);
var g = ~~(Math.random() * 255);
var b = ~~(Math.random() * 255);
ctx.fillStyle = ctx.strokeStyle = 'rgb(' + [r,g,b].join(',') + ')';
return false;
};
ctx.canvas.onmousemove = function (event) {
if (drawing) {
ctx.beginPath();
ctx.arc(event.clientX - this.offsetLeft, event.clientY - this.offsetTop,5,0,Math.PI*2,true);
ctx.fill();
}
}
ctx.canvas.onmouseup = function () {
// ctx.closePath();
// ctx.stroke();
drawing = false;
}
</script>
</body>
</html>
