Нужно заменить кнопки выбора цветов на color picker все это должно быть в css и js файлах то есть в html стилей на и onclick не должно быть помогите пожалуста
//index.html
<!DOCTYPE>
<html>
<head>
<title>Paint</title>
<link href='css/style.css' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body onload="init()">
<canvas id="myCanvas">
</canvas>
<form><left>
<input type="button" value="Rect" onclick="rectangle()">
<input type="button" value="Cicle" onclick="circle()">
<input type="button" value="Line" onclick="line()">
<input type="button" value="Pen" onclick="pencil()">
<input type="button" value ="Pen +" onclick="incline()">
<input type="button" value="Pen -" onclick="decline()">
<input type="button" value="Pull" onclick="spray()">
<input type="button" value="Lastick" onclick="eraser()">
<input type="button" value ="Lastick +" onclick="inceraser()">
<input type="button" value="Lastick -" onclick="deceraser()">
<input type="button" value="Clear" onclick="clear_screen()">
</left></form>
<input type="text" id="send1" value="" />
<input type="text" id="send2" value="" />
<table align="left" width="700">
<td><button onclick="color('black')" id = "black" ></button></td>
<td><button onclick="color('blue')" id = "blue" ></button></td>
<td><button onclick="color('green')" id = "green" ></button></td>
<td><button onclick="color('AliceBlue')" id = "AliceBlue"></button></td>
<td><button onclick="color('brown')" id = "brown"></button></td>
<td><button onclick="color('BlueViolet')" id = "BlueViolet" ></button></td>
<td><button onclick="color('Coral')" id = "Coral" ></button></td>
<td><button onclick="color('Orange')" id = "Orange" ></button></td>
<td><button onclick="color('Orchid')" id = "Orchihid" ></button></td>
<td><button onclick="color('red')" id ="red" ></button></td>
<td><button onclick="color('purple')" id = "purple"></button></td>
<tr>
<td><button onclick="color('tan')" id = "tan" ></button></td>
<td><button onclick="color('teal')" id = "teal" ></button></td>
<td><button onclick="color('magenta')" id = "magenta" ></button></td>
<td><button onclick="color('palegreen')" id = "palegreen"></button></td>
<td><button onclick="color('lime')" id="lime"></button></td>
<td><button onclick="color('limegreen')" id="limegreen" ></button></td>
<td><button onclick="color('maroon')" id = "maroon"></button></td>
<td><button onclick="color('MediumSeaGreen')" id = "MediumSeaGreen" ></button></td>
<td><button onclick="color('MidnightBlue')" id="MidnughtBlue" ></button></td>
<td><button onclick="color('orangered')" id = "orangered" ></button></td>
<td><button onclick="color('yellow')" id = "yellow" ></button></td>
</tr>
</table></center>
<script src="js/paint.js"></script>
</body>
</html>
style.css
|
Код:
|
#black{
background-color:black; height: 25px; width: 25px;
...........................
#myCanvas{
border:3px solid #000000
} |
//paint.js
var canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
canvas.height = 600;
canvas.width = 1200;
cstep = -1;
ctx.lineWidth = 1;
flag = 0;
eraser_width = 15;
eraser_height = 15;
document.getElementById('send1').value = "Розмір олівця: "+ ctx.lineWidth+ "pt";
document.getElementById('send2').value = "Розмір ластика: "+ eraser_width+"x"+eraser_height+ "pt";
document.getElementById('color').oninput = function(){
myColor = this.value;
}
function incline() {
ctx.lineWidth = ctx.lineWidth+1;
document.getElementById('send1').value = "Розмір олівця: "+ ctx.lineWidth+ "pt";
}
function decline() {
ctx.lineWidth = ctx.lineWidth-1;
document.getElementById('send1').value = "Розмір олівця: "+ ctx.lineWidth+ "pt";
}
function inceraser() {
eraser_width = eraser_width + 1;
eraser_height = eraser_height + 1;
document.getElementById('send2').value = "Розмір ластика: "+ eraser_width+"x"+eraser_height+ "pt";
}
function deceraser() {
eraser_width = eraser_width - 1;
eraser_height = eraser_height - 1;
document.getElementById('send2').value = "Розмір ластика: "+ eraser_width+"x"+eraser_height+ "pt";
}
function color(obj) {
ctx.strokeStyle = obj;
ctx.fillStyle = obj;
}
function clear_screen(){
var m = confirm("");
if (m) {
ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
}
}
function eraser(){
canvas.onmouseup = eraser_up;
canvas.onmousedown = eraser_down;
canvas.onmousemove = eraser_move;
function eraser_down(event){
eraser_flag = true;
}
function eraser_move(event){
if(eraser_flag){
ptx = event.x;
pty = event.y;
ctx.clearRect(ptx,pty,eraser_width,eraser_height);
}
}
function eraser_up(event){
eraser_flag = false;
}
}
function rectangle() {
canvas.onmousedown = rect_down;
canvas.onmousemove = rect_move;
canvas.onmouseup = rect_up;
var start_x, start_y, pos;
function rect_down(event) {
pos = ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
start_x = event.x;
start_y = event.y;
rect_flag = true;
}
function rect_up(event){
rect_flag = false;
}
function rect_move(event){
if(rect_flag){
ctx.putImageData(pos,0,0);
endx = event.x;
endy = event.y;
width = endx - start_x;
height = endy - start_y;
if(flag == 1)
ctx.rect(start_x,start_y,width,height);
else
ctx.strokeRect(start_x,start_y,width,height);
}
}
}
function circle(){
canvas.onmousedown = cir_down;
canvas.onmousemove = cir_move;
canvas.onmouseup = cir_up;
function cir_down(event){
pos = ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
start_x = event.x;
start_y = event.y;
cir_flag = true;
}
function cir_up(){
cir_flag = false;
}
function cir_move(event){
if (cir_flag){
ctx.putImageData(pos,0,0);
end_x = event.x;
end_y = event.y;
ctx.beginPath();
ctx.arc(Math.abs(start_x+end_x)/2,Math.abs(start_y+end_y)/2,Math.sqrt(Math.pow(end_x-start_x,2)+Math.pow(end_y-start_y,2))/2,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
if(flag == 1){
ctx.fill();
}
}
}
}
function line(){
canvas.onmousedown = line_down;
canvas.onmousemove = line_move;
canvas.onmouseup = line_up;
var startx,starty;
var pos;
function line_down(event){
pos = ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
startx = event.x;
starty = event.y;
line_flag = true;
}
function line_up(event){
line_flag = false;
}
function line_move(event){
if(line_flag){
ctx.putImageData(pos,0,0);
endx = event.x;
endy = event.y;
ctx.beginPath();
ctx.moveTo(startx,starty);
ctx.lineTo(endx,endy);
ctx.stroke();
ctx.closePath();
}
}
}
function pencil(){
canvas.onmousedown = pencil_down;
canvas.onmousemove = pencil_move;
canvas.onmouseup = pencil_up;
var startx,starty;
function pencil_down(e){
startx = e.x;
starty = e.y;
pencil_flag = true;
}
function pencil_move(event){
if(pencil_flag){
endx = event.x;
endy = event.y;
ctx.beginPath();
ctx.moveTo(startx,starty);
ctx.lineTo(endx,endy);
ctx.stroke();
ctx.closePath();
startx = endx;
starty = endy;
}
}
function pencil_up(event){
pencil_flag = false;
}
}
function spray() {
canvas.onmousedown = spray_down;
canvas.onmousemove = spray_move;
canvas.onmouseup = spray_up;
var startx,starty;
const spray_size = 20;
var pencil_flag = false;
function spray_down(e){
startx = e.x;
starty = e.y;
pencil_flag = true;
}
function spray_move(event){
if(pencil_flag){
endx = event.clientX;
endy = event.clientY;
ctx.beginPath();
ctx.rect(endx, endy, 1, 1);
for (i = 11; i--;) {
ctx.rect(endx + Math.random() * spray_size - spray_size/2,
endy + Math.random() * spray_size - spray_size/2,
1, 1);
}
ctx.closePath();
ctx.stroke();
ctx.fill();
startx = endx;
starty = endy;
}
}
function spray_up(event){
pencil_flag = false;
}
}
