我使用paper.js和canvas来制作web api,但是当打开网页时,除非我在画布上移动鼠标,否则什么都没有。我不知道为什么。 代码如下,实际上当我尝试绘制一个盒子时,它也是这样的。
<script language="javascript" type="text/javascript" canvas="canvas">
paper.install(window);
window.onload=function(){
var scope2 = new PaperScope();
paper = scope2.setup('controlpanel');
// var L_controlpanel = new Layer();
var bgshadoW = new Shape.Rectangle({
point:[10,10],
size:[200,360],
fillColor:'#f2f2f2',
shadowColor:'black',
shadowBlur: 12,
shadowOffset: [5, 5]
});
var colorfunC ;
var G_colorfunC = new Group();
var colorcontenT = ['#ffff66','#77ff33','#66b3ff','#f0aad9','#ffd486']
for (var i, i=0;i<5;i++){
colorfunC = new Path.Rectangle({
point:[20,20+30*i],
size:[15,15],
radius:5,
strokeColor: 'black',
strokeWidth: 1,
fillColor:'#f2f2f2',
data:{'click':0,'color':colorcontenT[i]}
});
G_colorfunC.addChild(colorfunC);
colorfunC.onClick = function(event){
G_colorfunC.fillColor='#f2f2f2';
this.fillColor=' #4dc3ff';
fillcolorshoT = this.data['color'];
}
fixdemO = new Path.Rectangle({
point:[60,20+30*i],
size:[50,15],
fillColor:colorcontenT[i]
});
}
var G_denVfunC = new Group();
var denVcontenT = [120,150,200,250,300]
for (var i, i=0;i<5;i++){
denVfunC = new Path.Rectangle({
point:[20,200+30*i],
size:[15,15],
radius:5,
strokeColor: 'black',
strokeWidth: 1,
fillColor:'#f2f2f2',
data:{'click':0,'denV':denVcontenT[i]}
});
G_denVfunC.addChild(denVfunC);
denVfunC.onClick = function(event){
G_denVfunC.fillColor='#f2f2f2';
this.fillColor='#4dffa6';
denV = this.data['denV'];
}
FixText = new PointText({
point:[60,212+30*i],
fontSize:14,
fillColor: 'black',
content:'DOMA density: '+denVcontenT[i]
});
}
}
</script>
答案 0 :(得分:0)
找到原因,只需添加
paper.view.update();