在画布上的形状中随机选择颜色
[英]making random colors in shapes on canvas
问题描述
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. 例如，我只把它放在makeRect函数中，但也应该放在makeCircle函数中。 Can any one tell me what i made wrong here? 谁能告诉我我在这里做错了什么？
This is my HTML: 这是我的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: 这是我的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: 这是我的CSS：
h4{
text-align: center;
}
#canvas{
margin-left: 250px;
border: 1px solid black;
}
2 个解决方案
解决方案1
0 2015-12-15 15:43:31
Your first bit of JS was missing some brackets. 您的JS的第一部分缺少一些括号。
var R = (Math.floor(Math.random() * 255)),
G = (Math.floor(Math.random() * 255)),
B = (Math.floor(Math.random() * 255)),
randColor = 'rgb(' + R + ', ' + G + ',' + B + ')';
解决方案2
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));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.