Hallo,
ich habe das Problem das ich ein canvas Element mit 2 teilen habe bei diesen teilen möchte ich gern mit Hilfe von
zwei Button getrennt die Farbe verändern kriege das aber nicht gebacken. Es ändern sich immer beide Teile hier ist mal der code im netzt konnte ich leider nichts finden.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css">
body {
padding:100px;
background:#ffffff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function buttonclick1() {
alert('you have clicked me');
}
var canvas=null;
var context=null;
//var ctx=null;
window.onload = function () {
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
//context.beginPath();
// ebene1/Pfad
context.save();
context.beginPath();
context.moveTo(226.8, 276.8);
context.bezierCurveTo(228.0, 277.5, 228.3, 281.2, 230.6, 286.5);
context.bezierCurveTo(231.2, 288.6, 231.8, 290.8, 232.4, 293.1);
context.bezierCurveTo(232.5, 293.3, 232.5, 293.4, 232.6, 293.6);
context.bezierCurveTo(282.5, 282.8, 290.2, 245.2, 279.0, 195.7);
context.bezierCurveTo(270.5, 148.5, 273.7, 104.5, 285.3, 62.7);
context.bezierCurveTo(284.5, 48.0, 280.8, 47.5, 279.3, 35.4);
context.lineTo(276.8, 4.3);
context.lineTo(263.5, 2.8);
context.bezierCurveTo(263.9, 40.0, 255.3, 65.3, 227.4, 63.9);
context.lineTo(227.4, 63.9);
context.bezierCurveTo(199.6, 65.4, 189.6, 40.0, 190.0, 2.8);
context.lineTo(176.7, 4.3);
context.lineTo(174.2, 35.4);
context.bezierCurveTo(172.7, 47.5, 169.0, 48.0, 168.2, 62.7);
context.bezierCurveTo(179.8, 104.5, 183.0, 148.5, 174.5, 195.7);
context.bezierCurveTo(163.3, 245.2, 171.0, 282.8, 220.9, 293.6);
context.bezierCurveTo(220.9, 293.4, 221.0, 293.3, 221.1, 293.1);
context.bezierCurveTo(221.6, 290.8, 222.1, 288.6, 222.9, 286.5);
context.bezierCurveTo(224.8, 281.3, 225.6, 278.0, 226.8, 276.8);
context.lineTo(226.8, 276.8);
context.closePath();
context.fillStyle = "rgb(20, 21, 21)";
context.fill();
context.restore();
//canvas=document.getElementById("drawing2");
//context=canvas.getContext("2d");
// bodyfrontseite/Pfad
context.save();
//context.beginPath();
context.moveTo(7.2, 235.2);
context.bezierCurveTo(11.0, 218.6, 12.0, 155.3, 11.4, 142.4);
context.bezierCurveTo(10.8, 129.5, 9.0, 120.6, 6.9, 106.7);
context.bezierCurveTo(-0.4, 87.5, 1.7, 82.8, 1.7, 70.2);
context.bezierCurveTo(1.7, 52.9, 21.9, 24.8, 23.2, 26.1);
context.bezierCurveTo(23.3, 26.2, 28.0, 26.5, 27.4, 27.7);
context.bezierCurveTo(23.0, 35.5, -0.4, 64.1, 10.8, 75.3);
context.bezierCurveTo(11.5, 76.5, 12.6, 76.5, 13.3, 76.2);
context.bezierCurveTo(36.3, 68.3, 60.2, -2.7, 78.4, 3.2);
context.bezierCurveTo(80.4, 3.2, 48.4, 40.3, 48.4, 60.0);
context.bezierCurveTo(48.4, 60.0, 51.1, 221.5, 35.2, 268.8);
context.bezierCurveTo(34.2, 267.8, 31.7, 266.7, 30.3, 265.3);
context.bezierCurveTo(16.6, 266.1, 3.4, 251.8, 7.2, 235.2);
context.lineTo(7.2, 235.2);
context.closePath();
context.fillStyle = "rgb(20, 21, 21)";
context.fill();
context.restore();
}
function BlueRect () {
context.fillStyle="#701be0"; // This changes the rectangle to blue
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function GreenRect1 () {
context.fillStyle="#1be050"; // This function changes the rectangle to green
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function YellRect1 () {
context.fillStyle="#fcfc00"; // This function changes the rectangle to yellow
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function RedRect1 () {
context.fillStyle="#fc0d00";// This function changes the rectangle to red
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, canvas.width, canvas.height); //This function clears the whole canvas area
}
function buttonclick () {
ctx.fillStyle="#fc0d00";// This function changes the rectangle to red
ctx.fill();
ctx.strokeStyle="#000000"; //Outline Farbe
ctx.stroke();
}
</script>
<meta name="robots" content="noindex">
</head>
<body>
<p>Interactive Canvas</p>
<canvas id="drawing" style="" width="303" height="338"> </canvas>
<p>Click on the buttons below to change the color of the rectangle. </p>
<input type="button" value="Blue" id="blue" onclick="BlueRect()" />
<input type="button" value="Green" id="green" onclick="GreenRect1()" />
<input type="button" value="Yellow" id="yellow" onclick="YellRect1()" />
<input type="button" value="Red" id="red" onclick="RedRect1()" />
<input type="button" value="Click to clear canvas" id="clear" onclick="ImgClr()" />
</body>
ich habe das Problem das ich ein canvas Element mit 2 teilen habe bei diesen teilen möchte ich gern mit Hilfe von
zwei Button getrennt die Farbe verändern kriege das aber nicht gebacken. Es ändern sich immer beide Teile hier ist mal der code im netzt konnte ich leider nichts finden.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css">
body {
padding:100px;
background:#ffffff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function buttonclick1() {
alert('you have clicked me');
}
var canvas=null;
var context=null;
//var ctx=null;
window.onload = function () {
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
//context.beginPath();
// ebene1/Pfad
context.save();
context.beginPath();
context.moveTo(226.8, 276.8);
context.bezierCurveTo(228.0, 277.5, 228.3, 281.2, 230.6, 286.5);
context.bezierCurveTo(231.2, 288.6, 231.8, 290.8, 232.4, 293.1);
context.bezierCurveTo(232.5, 293.3, 232.5, 293.4, 232.6, 293.6);
context.bezierCurveTo(282.5, 282.8, 290.2, 245.2, 279.0, 195.7);
context.bezierCurveTo(270.5, 148.5, 273.7, 104.5, 285.3, 62.7);
context.bezierCurveTo(284.5, 48.0, 280.8, 47.5, 279.3, 35.4);
context.lineTo(276.8, 4.3);
context.lineTo(263.5, 2.8);
context.bezierCurveTo(263.9, 40.0, 255.3, 65.3, 227.4, 63.9);
context.lineTo(227.4, 63.9);
context.bezierCurveTo(199.6, 65.4, 189.6, 40.0, 190.0, 2.8);
context.lineTo(176.7, 4.3);
context.lineTo(174.2, 35.4);
context.bezierCurveTo(172.7, 47.5, 169.0, 48.0, 168.2, 62.7);
context.bezierCurveTo(179.8, 104.5, 183.0, 148.5, 174.5, 195.7);
context.bezierCurveTo(163.3, 245.2, 171.0, 282.8, 220.9, 293.6);
context.bezierCurveTo(220.9, 293.4, 221.0, 293.3, 221.1, 293.1);
context.bezierCurveTo(221.6, 290.8, 222.1, 288.6, 222.9, 286.5);
context.bezierCurveTo(224.8, 281.3, 225.6, 278.0, 226.8, 276.8);
context.lineTo(226.8, 276.8);
context.closePath();
context.fillStyle = "rgb(20, 21, 21)";
context.fill();
context.restore();
//canvas=document.getElementById("drawing2");
//context=canvas.getContext("2d");
// bodyfrontseite/Pfad
context.save();
//context.beginPath();
context.moveTo(7.2, 235.2);
context.bezierCurveTo(11.0, 218.6, 12.0, 155.3, 11.4, 142.4);
context.bezierCurveTo(10.8, 129.5, 9.0, 120.6, 6.9, 106.7);
context.bezierCurveTo(-0.4, 87.5, 1.7, 82.8, 1.7, 70.2);
context.bezierCurveTo(1.7, 52.9, 21.9, 24.8, 23.2, 26.1);
context.bezierCurveTo(23.3, 26.2, 28.0, 26.5, 27.4, 27.7);
context.bezierCurveTo(23.0, 35.5, -0.4, 64.1, 10.8, 75.3);
context.bezierCurveTo(11.5, 76.5, 12.6, 76.5, 13.3, 76.2);
context.bezierCurveTo(36.3, 68.3, 60.2, -2.7, 78.4, 3.2);
context.bezierCurveTo(80.4, 3.2, 48.4, 40.3, 48.4, 60.0);
context.bezierCurveTo(48.4, 60.0, 51.1, 221.5, 35.2, 268.8);
context.bezierCurveTo(34.2, 267.8, 31.7, 266.7, 30.3, 265.3);
context.bezierCurveTo(16.6, 266.1, 3.4, 251.8, 7.2, 235.2);
context.lineTo(7.2, 235.2);
context.closePath();
context.fillStyle = "rgb(20, 21, 21)";
context.fill();
context.restore();
}
function BlueRect () {
context.fillStyle="#701be0"; // This changes the rectangle to blue
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function GreenRect1 () {
context.fillStyle="#1be050"; // This function changes the rectangle to green
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function YellRect1 () {
context.fillStyle="#fcfc00"; // This function changes the rectangle to yellow
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function RedRect1 () {
context.fillStyle="#fc0d00";// This function changes the rectangle to red
context.fill();
context.strokeStyle="#000000"; //Outline Farbe
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, canvas.width, canvas.height); //This function clears the whole canvas area
}
function buttonclick () {
ctx.fillStyle="#fc0d00";// This function changes the rectangle to red
ctx.fill();
ctx.strokeStyle="#000000"; //Outline Farbe
ctx.stroke();
}
</script>
<meta name="robots" content="noindex">
</head>
<body>
<p>Interactive Canvas</p>
<canvas id="drawing" style="" width="303" height="338"> </canvas>
<p>Click on the buttons below to change the color of the rectangle. </p>
<input type="button" value="Blue" id="blue" onclick="BlueRect()" />
<input type="button" value="Green" id="green" onclick="GreenRect1()" />
<input type="button" value="Yellow" id="yellow" onclick="YellRect1()" />
<input type="button" value="Red" id="red" onclick="RedRect1()" />
<input type="button" value="Click to clear canvas" id="clear" onclick="ImgClr()" />
</body>
