Colors 是否可以更改使用KineticJS创建的矩形内一个像素的颜色?
这是我的代码:Colors 是否可以更改使用KineticJS创建的矩形内一个像素的颜色?,colors,kineticjs,pixel,Colors,Kineticjs,Pixel,这是我的代码: var Editor = { layer: new Kinetic.Layer(), map: null, init: function () { var stage = new Kinetic.Stage({ container: 'board', width: 800, height: 800 }) this.map = new Ki
var Editor = {
layer: new Kinetic.Layer(),
map: null,
init: function () {
var stage = new Kinetic.Stage({
container: 'board',
width: 800,
height: 800
})
this.map = new Kinetic.Shape({
sceneFunc: function(context) {
context.beginPath();
context.moveTo(0, 0);
context.lineTo(mapWidth, 0);
context.lineTo(mapWidth, mapHeight);
context.lineTo(0, mapHeight);
context.closePath();
context.fillStrokeShape(this);
},
x: 0,
y: 0,
fill: 'green',
draggable: true
})
this.layer.add(this.map)
stage.add(this.layer)
}
}
我想更改矩形中像素的颜色。像素的颜色将由“菱形正方形”算法生成。是否可以更改单个像素的颜色?如果是这样,我该怎么做?[更改的答案] 使用屏幕外html画布覆盖“菱形正方形”算法中的像素 演示:
原型
正文{padding:20px;}
#容器{
边框:实心1px#ccc;
边缘顶部:10px;
宽度:350px;
高度:350px;
}
$(函数(){
var阶段=新的动力学阶段({
容器:'容器',
宽度:350,
身高:350
});
var layer=新的动能层();
阶段。添加(层);
var-mapWidth=50;
var mapHeight=75;
//使用屏幕外画布作为覆盖绿色贴图的像素贴图
var pixelCanvas=document.createElement(“画布”);
var ctx=pixelCanvas.getContext(“2d”);
pixelCanvas.width=mapWidth;
pixelCanvas.height=mapHeight;
像素画布。像素=[]
pixelCanvas.setPixel=函数(x、y、颜色){
ctx.fillStyle=颜色;
ctx.fillRect(x,y,1,1);
};
//创建一个组
//它保存绿色贴图背景和像素贴图覆盖
var mapGroup=新的动力学组({
x:30,
y:30,
宽度:地图宽度,
高度:地图高度,
德拉格布尔:是的
});
图层添加(mapGroup);
//绿色背景
var map=new动能.Rect({
x:0,,
y:0,
宽度:地图宽度,
高度:地图高度,
填充:“绿色”
});
mapGroup.add(map);
//图像覆盖
//从屏幕外画布获取“实时更新”
var pixels=新的动能图像({
x:0,,
y:0,
图像:像素画布
});
添加(像素);
layer.draw();
//测试
变量y=15;
$(“#添加”)。单击(函数(){
对于(var i=0;iI),我编辑了代码以符合您的建议,但我现在如何才能访问“上下文”变量?此上下文没有fillRect方法我必须更改我的答案,因为使用v5.0.1时出现了一些“重影”。
<!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-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var mapWidth=50;
var mapHeight=75;
// use an offscreen canvas as a pixel-map overlaying the green map
var pixelCanvas=document.createElement("canvas");
var ctx=pixelCanvas.getContext("2d");
pixelCanvas.width=mapWidth;
pixelCanvas.height=mapHeight;
pixelCanvas.pixels=[]
pixelCanvas.setPixel=function(x,y,color){
ctx.fillStyle=color;
ctx.fillRect(x,y,1,1);
};
// create a group
// that holds the green map background and pixel-map overlay
var mapGroup=new Kinetic.Group({
x:30,
y:30,
width:mapWidth,
height:mapHeight,
draggable:true
});
layer.add(mapGroup);
// the green background
var map=new Kinetic.Rect({
x:0,
y:0,
width:mapWidth,
height:mapHeight,
fill:"green"
});
mapGroup.add(map);
// an image overlay that
// gets "live-updates" from an offscreen canvas
var pixels=new Kinetic.Image({
x:0,
y:0,
image:pixelCanvas
});
mapGroup.add(pixels);
layer.draw();
// testing
var y=15;
$("#add").click(function(){
for(var i=0;i<5;i++){
pixelCanvas.setPixel(15,y,"red");
pixelCanvas.setPixel(25,y,"gold");
pixelCanvas.setPixel(35,y++,"blue");
}
pixels.draw();
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="add">Add test Pixels</button>
<div id="container"></div>
</body>
</html>