making random colors in shapes on canvas
Question
I have a code for making random shapes on canvas. i want to fill the shapes with random colors, for this i made this:
var R=(Math.floor(Math.random() * 255);
var G=(Math.floor(Math.random() * 255);
var B=(Math.floor(Math.random() * 255);
var randColor='rgb(' + R +', ' + G + ',' + B +')';
context.fillStyle=randColor;
I put this inside the functions that generats my shapes, but with no luck. for the example, ive put it only in the makeRect function, but it should be in the makeCircle function too. Can any one tell me what i made wrong here?
This is my HTML:
<head>
<link href="design.css" rel="stylesheet" />
</head>
<body>
<h4> Enter below, and then press the canvas to save your work</h4>
<canvas id="canvas" width="1000" height="750"></canvas>
<br/>
<br/>
<span>
How many Circles do you want?
<input id="inCircle" />
</span>
<br/>How many Squers do you want?
<input id="inSquer" />
<br/>
<button id="creat">Creat My Work</button>
<script src="js.js"></script>
</body>
</html>
This is my JavaScript:
var drawing = document.getElementById("canvas");
var context = drawing.getContext("2d");
var inSquer = document.getElementById("inSquer");
var inCircle = document.getElementById("inCircle");
var button = document.getElementById("creat");
button.addEventListener("click", function() {
paint(parseInt(inSquer.value), parseInt(inCircle.value));
});
drawing.addEventListener("click", function() {
saveImage();
});
function saveImage() {
window.location = drawing.toDataURL("image/jpeg");
}
function paint(numOfRect, numOfCirc) {
for (var makeIt = 0; makeIt < numOfRect; makeIt++) {
makeRect(drawing, context);
makeCircle(drawing, context);
}
}
function makeCircle(drawing, context) {
var radius = Math.floor(Math.random() * 100);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
}
function makeRect(drawing, context) {
var w = Math.floor(Math.random() * 100);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
var R=(Math.floor(Math.random() * 255);
var G=(Math.floor(Math.random() * 255);
var B=(Math.floor(Math.random() * 255);
var randColor='rgb(' + R +', ' + G + ',' + B +')';
context.fillStyle=randColor;
/*context.fillStyle="green";*/
context.fillRect(x, y, w, w);
}
And this is my css:
h4{
text-align: center;
}
#canvas{
margin-left: 250px;
border: 1px solid black;
}
2 answers
solution1
0 2015-12-15 15:43:31
Your first bit of JS was missing some brackets.
var R = (Math.floor(Math.random() * 255)),
G = (Math.floor(Math.random() * 255)),
B = (Math.floor(Math.random() * 255)),
randColor = 'rgb(' + R + ', ' + G + ',' + B + ')';
solution2
0 2015-12-15 15:43:44
You are missing some brackets at
var R=(Math.floor(Math.random() * 255);
var G=(Math.floor(Math.random() * 255);
var B=(Math.floor(Math.random() * 255);
put this for it to work
var R=(Math.floor(Math.random() * 255));
var G=(Math.floor(Math.random() * 255));
var B=(Math.floor(Math.random() * 255));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.