html5 颜色随机变化,每次在HTML5 Canvas的.fillStyle中使用时，将画布图案随机化为不同的颜色(randomizing a canvas pattern to be a diff...

每次在HTML5 Canvas的.fillStyle中使用时，将画布图案随机化为不同的颜色(randomizing a canvas pattern to be a different color every time it is used in a .fillStyle in HTML5 Canvas)

使用两幅画布。 原来要做的摩天大楼。 第二，创建插入每个摩天大楼的模式。 另外，我使用的是随机颜色功能，因此每个建筑物都有一种新颜色。

对两个摩天大楼使用相同的图案画布将从randcolor()中发出相同的颜色。 如何为每个新元素更改随机颜色，而不为每个模式创建新的canvas元素？

var c = document.getElementById('canvas1');

var ctx = c.getContext('2d');

//create and setup new canvas to be used for pattern

var pattern = document.createElement('canvas');

pattern.width = 2;

pattern.height = 10;

var pctx = pattern.getContext('2d');

pctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';

pctx.fillRect(0,0,12,14);

pctx.lineWidth = 1;

pctx.strokeStyle = 'rgb(255,255,255)';

pctx.strokeRect(0,0,22,22);

//set up variable for

var pat1 = ctx.createPattern(pattern, 'repeat');

//building 1

ctx.fillStyle = pat1;

ctx.fillRect(0, 260 , 100,240);

//building 2

ctx.fillStyle = pat1;

ctx.fillRect(100, 210, 100, 290);

ctx.fillRect(115, 500-340, 70, 50);

ctx.fillRect(130, 100, 40, 60);

ctx.fillRect(140, 40, 20, 60);

一千谢谢你

Using two canvases. The original to make the skyscrapers. The second, to create the pattern to insert into every individual skyscraper. In addition, I am using a random color function, so that each building has a new color.

Using the same pattern canvas for both skyscrapers will emit the same color from the randcolor(). How do I change the random color for each new element, without creating a new canvas element for each pattern?

My current code, which can also be found in the following http://jsfiddle.net/zGsEh/7/ is...

var c = document.getElementById('canvas1');

var ctx = c.getContext('2d');

//create and setup new canvas to be used for pattern

var pattern = document.createElement('canvas');

pattern.width = 2;

pattern.height = 10;

var pctx = pattern.getContext('2d');

pctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';

pctx.fillRect(0,0,12,14);

pctx.lineWidth = 1;

pctx.strokeStyle = 'rgb(255,255,255)';

pctx.strokeRect(0,0,22,22);

//set up variable for

var pat1 = ctx.createPattern(pattern, 'repeat');

//building 1

ctx.fillStyle = pat1;

ctx.fillRect(0, 260 , 100,240);

//building 2

ctx.fillStyle = pat1;

ctx.fillRect(100, 210, 100, 290);

ctx.fillRect(115, 500-340, 70, 50);

ctx.fillRect(130, 100, 40, 60);

ctx.fillRect(140, 40, 20, 60);

A thousand thank you's

原文：https://stackoverflow.com/questions/24152565

更新时间：2019-11-01 17:11

相关问答

几件事情： 1)你没有为画布设置宽度和高度，所以会出现失真，X / Y值会变得很奇怪。 解决方案：将画布的宽度和高度设置为窗口高度和宽度 2)确定clickX和clickY的方法过于复杂。 解决方案：使用event.clientX和event.clientY 获取上下文后，设置宽度和高度： canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

注意：我还建议您删除CSS中正文的边距 body { margin

...

在顶部网格画布覆盖的底部画布上绘图 只需在顶部网格画布上侦听鼠标事件，但在绘图画布上绘制。 var gridCanvas=document.getElementById('test');

gridCanvas.onmousedown = function(e) {

isDrawing = true;

ctx.lineWidth = 10;

ctx.lineJoin = ctx.lineCap = 'round';

ctx.moveTo(e.clientX, e.clientY);

...

你的第一个问题：这只是一个静态图像。 你只调用一次drawSimon() ，因此它只被绘制一次。 要解决此问题，您需要使用requestAnimationFrame或setInterval (最好是第一个)。 requestAnimationFrame就像一个简单的方法调用，但延迟了方法，因此它与屏幕的帧速率对齐。 你需要用drawSimon来调用drawSimon 。 function drawSimon() {

ctx.clearRect(0, 0, ctx.canvas.width,

...

将上下文模式视为画布上的背景图像。 模式始终从画布原点[0,0]开始。 如果图案重复，则图案在向右和向下重复的图块中填充画布。 因此，如果在画布周围移动三角形，则三角形将始终显示图案的不同部分。 有三种方法可以使三角形始终显示图案图像的相同部分。 选项＃1 - context.translate 将画布原点从其默认[0,0]位置移动到三角形位置[loc.x，loc.y]。 您可以使用画布转换执行此操作。 特别是，translate命令将移动原点。 移动原点也会移动图案的左上角起始位置，以使图案始终

...

这是因为您多次使用moveTo()方法，这会破坏对前一行的引用。 另外，在绘制矩形之前，应该使用beginPath()方法。 var ctx = document.getElementById("canvas").getContext("2d");

var size = 200;

ctx.beginPath();

ctx.rect(500, 50, 200, 200);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(530, 100);

...

3注意事项： fillStyle不会导致您的画布被填充。 这意味着当你填充一个形状时 ，它将填充该颜色。 因此，您需要编写canvas.fillRect( xPos, yPos, width, height) 。 等到图像实际加载，否则渲染可能不一致或有问题。 仔细考虑画布中使用的跨域图像 - 大多数浏览器都会抛出安全异常并停止执行代码。 3 notes: fillStyle does not cause your canvas to be filled. It means that when y

...

你需要的是稍微改变一点 - 尽管在某种程度上可以“填充背景”，画布工作的主要方式是不断重绘整个图像。 在HTML游戏中，它每秒执行X次，但在较小的项目中，通常应该在每次操作后完成。 所以，在你的情况下，像这样的东西应该可以解决这个问题： FIDDLE var canvads = document.getElementById('canvas')

var context = canvas.getContext('2d');

function initCanvas() {

context.cle

...

在进行填充之前，您需要使用移动平移画布。 还记得在制作你的形状之前先使用beginPath 。 var pattern = document.getElementById('pattern');

var can = document.getElementById('can');

var ctx = can.getContext('2d');

var w = can.width = 300;

var h = can.height = 200;

pattern.width = p

...