- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个形状,比方说:
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
canvas.fillStroke(this);
形状可能每次都不一样。
我有 10 个蓝色渐变,并且想随着时间的推移随机绘制形状中包含的像素。
我什至不知道如何获取形状中包含的像素列表,以便我可以编辑它们。
此外,我认为每帧重绘它可能会影响性能。
有什么想法可以继续吗?谢谢! :)
最佳答案
由于以下问题,您的解决方案实际上有点复杂!
问题:
解决方法:
要绘制随机像素并仍然覆盖所有像素,请创建一个“ map ”数组:
这是创建映射数组的函数:
// make an array with elements from 0 to shapeWidth*shapeHeight in random order
function initPixelArray(shapeWidth,shapeHeight){
var array=[];
var i;
var countdown;
var temp;
// Must be a better way to fill an array with
// a sequential group of numbers, just in random order
// Anyone got some magic for this ????????????
// fill array with sequential numbers representing each pixel;
for(var i=0;i<shapeWidth*shapeHeight;i++){ array.push(i); }
// randomize the array
countdown=array.length;
while (countdown > 0) {
i = (Math.random() * countdown--) | 0;
temp = array[countdown];
array[countdown] = array[i];
array[i] = temp;
}
//
return array;
}
接下来创建自定义 KineticJS 形状:
这将使用您的形状作为 Canvas 背景的剪切路径来创建自定义动力学形状
var shape = new Kinetic.Shape({
drawFunc: function(canvas){
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(100, 100, 60, 170);
context.closePath();
context.clip();
context.drawImage(this.backgroundCanvas,0,0);
canvas.fillStroke(this);
},
x: x,
y: y,
stroke: "lightgray",
strokeWidth: 8,
draggable:true
});
将 10 种颜色逐像素动画化到形状中
此函数使用 10 种蓝色将成批随机放置的像素添加到背景
// add pixels to the background canvas
// after layer.draw the new pixels will be visible in the shape
function updatePattern(){
// add 10 pixels of each type of blue (100px total)
for(var n=0;n<shapeWidth/8;n++){
// set a blue color
tempCtx.fillStyle=color[n];
tempCtx.beginPath();
// draw 10 random pixels in that blue
for(var b=0;b<10;b++){
// get next random pixel
var i=randomPixels[nextPixel]
// calculate x/y from i
var y=Math.floor(i/shapeWidth);
var x=(i-y*shapeWidth)-1;
// draw
tempCtx.rect(x,y,1,1);
// increment array index and do bounds check
if(++nextPixel>=randomPixels.length){return;}
}
// done filling with this blue--do the fill()
tempCtx.fill();
}
}
注意:为了保持高性能——同时也为了保持观看者的耐心(!),我一次绘制了一批像素。
蓝色色调的适当混合得以保持。
当然,您可以根据自己的喜好设计风格。
这是代码和 fiddle :http://jsfiddle.net/m1erickson/zhatS/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
// the KineticJS shape
var myShape;
//
var shapeWidth=stage.getWidth();
var shapeHeight=stage.getHeight();
// temporary canvas to create/update the pattern for the Shape
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=shapeWidth;
tempCanvas.height=shapeHeight;
// an array of pixel references from 0 to shapeWidth*shapeHeight
// used to draw individual pixels randomly
var randomPixels=initPixelArray(shapeWidth,shapeHeight);
var nextPixel=0;
// shades of colors to fill with
var color;
var colors={
blues:["#0000ff","#2b60de","#4863a0","#2554c7","#000080","#afdcec","#c6deff","#6698ff","#c2dfff","#79baec"],
reds:["#ff0000","#f4c3c2","#fd5c5c","#fe2625","#ff3030","#ff6666","#fa8072","#efc3bf","#ff6347","#ef7942"]
}
// Create a KineticJS shape
function kShape(x,y){
var shape = new Kinetic.Shape({
drawFunc: function(canvas){
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(100, 100, 60, 170);
context.closePath();
context.clip();
context.drawImage(this.backgroundCanvas,0,0);
canvas.fillStroke(this);
},
x: x,
y: y,
stroke: "lightgray",
strokeWidth: 8,
draggable:true
});
// let the shape keep a reference to the background canvas
shape.backgroundCanvas=tempCanvas;
layer.add(shape);
layer.draw();
return(shape);
}
// make an array with elements from 0 to shapeWidth*shapeHeight in random order
function initPixelArray(shapeWidth,shapeHeight){
var array=[];
var i;
var countdown;
var temp;
// Must be a better way to fill an array with
// a sequential group of numbers, just in random order
// Anyone got some magic for this ????????????
// fill array with sequential numbers representing each pixel;
for(var i=0;i<shapeWidth*shapeHeight;i++){ array.push(i); }
// randomize the array
countdown=array.length;
while (countdown > 0) {
i = (Math.random() * countdown--) | 0;
temp = array[countdown];
array[countdown] = array[i];
array[i] = temp;
}
//
return array;
}
// add pixels to the pattern
function updatePattern(){
// add 10 pixels of each type of blue (100px total)
for(var n=0;n<shapeWidth/8;n++){
// set a blue color
tempCtx.fillStyle=color[n];
tempCtx.beginPath();
// draw 10 random pixels in that blue
for(var b=0;b<10;b++){
// get next random pixel
var i=randomPixels[nextPixel]
// calculate x/y from i
var y=Math.floor(i/shapeWidth);
var x=(i-y*shapeWidth)-1;
// draw
tempCtx.rect(x,y,1,1);
// increment array index and do bounds check
if(++nextPixel>=randomPixels.length){return;}
}
// done filling with this blue--do the fill()
tempCtx.fill();
}
}
// great cross-browser animation shim by Paul Irish
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
// animate filling of pixels
var fps = 60;
function animate() {
setTimeout(function() {
requestAnimationFrame(animate);
if(nextPixel>=randomPixels.length){return;}
updatePattern();
layer.draw();
}, 1000 / fps);
}
////////////////// ACTION STARTS HERE
var myShape=kShape(20,20);
$("#blues").click(function(){
color=colors.blues;
nextPixel=0;
animate();
});
$("#reds").click(function(){
color=colors.reds;
nextPixel=0;
animate();
});
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
<button id="blues">Fill blues</button>
<button id="reds">Fill reds</button>
</body>
</html>
关于javascript - HTML5 Canvas - 用随机像素颜色填充形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17381671/
padding:initial 比 padding:0 有什么优势吗?示例: textarea { padding: 0; } Hello, world! 最佳答案 它们的意思是一
我尝试通过按钮填充 JList,然后在先前填充的 Jlist 上使用 DoubleClick 填充 JTextField。 代码: private void extractUsedVariables
我正在尝试做 var width = ($(this).width() + $(this).css('padding-left') + $(this).css('padding-right' ));
我在导航中添加了悬停效果,遗憾的是悬停也影响了上面的文字。如何在不影响文本位置的情况下向导航添加悬停? 可悲的是,我找不到解决这个问题的方法。 HTML 模板:http://projects.help
我是 F# 初学者,下面代码中的 %-5s 和 %5s 有什么作用?我认为它提供了空间填充,但我不确定它是如何填充的? printfn "%-5s %5s" "a" "b" 当我尝试 prin
我需要选择带狗的用户(带 type 等于“狗”的宠物) var User = Waterline.Collection.extend({ identity: 'user', attribute
我一直在尝试让 Excel 在一组列上应用公式,然后将模式扩展到整个行集。 这导致了以下代码: For i = 0 To avgsheetNames.Count - 1 If Contains(CSt
随着 Flutter 2.0 的发布,FlatButton已被替换为 TextButton . 因此,填充属性不再直接可用,而是作为 ButtonStyle属性(property)。 我的问题是,我该
这似乎是一个简单的问题,但我已经尝试了一个小时,似乎无法弄清楚。 我要做的就是用 Canvas 填充 MainWindow。我找不到任何允许这样做的属性,我能想到的唯一方法是设置 Canvas.Wid
这是a website具有移动 View 。 网站宽度为 640 像素,但 iPhone 以 678 像素渲染文档。在 Android 中看起来很棒。 我添加了视口(viewport)元: 主体 C
我正在使用 GridBagLayout到(当前)显示两行。我知道这种布局对于这项任务来说太过分了,但我正在努力学习如何使用它。问题是我已将两个面板添加到两个单独的行中,并且内容周围存在巨大差距(请参见
我有以下代码已传递给我并创建多边形: var map; function initialize() { var myLatlng = new google.maps.LatLng(-36.4
我在 Jpanel 中有一些项目,然后将其推到顶部并用作基本搜索引擎的工具栏。我遇到一个问题,因为没有足够的空间,所以我的最后一个组合框没有显示。但是,左侧有很多空白空间,我需要移动所有内容来填充 J
我创建了带有阈值的二进制图像。如下图所示如何改变白色形状的颜色以使其可索引? 到目前为止,这是我的代码: void threshold() { cv::Mat src_8uc3_img = c
我有一个 JTable,我想知道是否有更好的方法来填充它,这是我的代码: //Metodo para llenar un jtable con datos de la base public stat
我想要做的是裁剪一个卷以删除所有不相关的数据。例如,假设我有一个 100x100x100 的体积,其中填充了 0,但其中的 50x50x50 体积则填充了 1。如何从原始体积中获得裁剪后的 50x50
因此,我正在创建一种对一组数字进行洗牌的方法,其想法是创建这些数字的总体。因此,我创建了一个循环,对数字进行洗牌,然后将其添加到数组列表中,但是经过一些调试语句后,我发现它确实对数字进行洗牌,但只将最
假设我有这两个类: public class A where T : IEntityWithID, new() { private static EntityInfo entityInfo =
我正在尝试添加用户输入的两个大整数作为字符串。当两个输入字符串的长度不同时,我尝试用零填充较短的数字,但它不起作用。因此,如果我输入 456 和 7,它会给出 3,前面有一些随机字符。感谢您的任何建议
这是我将内容打印到表格 View 的代码 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: Index
我是一名优秀的程序员,十分优秀!