我有以下用于在画布上绘图的代码。但是线条正在变成多边形并在第一线后延迟。如果有人知道，请帮助 这是我的JS代码，我正在使用EaselJS
var app ={
stage:null,
stagetools:null,
container:null,
loader:null,
stageArea:null,
backgroundContainer:null,
backgroundBounds:null,
oldPt:0,
oldMidPt:0,
midPt:0,
NUM_LINES: -1,
manifest:[],
toolsAssets:[],
lineArray:[],
lineArray2:[],
lineArray3:[],
filters:[],
filters2:[],
mouseDOWN:false,
bgscale:null,
init: function(chosenNum){
//filters
this.filters[0] = new createjs.Shadow('#0066cc',1, 1, 30);
this.filters[1] = new createjs.Shadow('#0ceaed',1, 1, 30);
this.filters[2] = new createjs.Shadow('#00ff2a',1, 1, 30);
this.filters[3] = new createjs.Shadow('#de00ff',1, 1, 30);
this.filters[4] = new createjs.Shadow('#f40045',1, 1, 30);
this.filters[5] = new createjs.Shadow('#d8ff00',1, 1, 30);
this.filters[6] = new createjs.Shadow('#ff8400',1, 1, 30);
this.filters[7] = new createjs.Shadow('#7d36ff',1, 1, 30);
this.filters2[0] = new createjs.Shadow('#0066cc',0, 0, 10);
this.filters2[1] = new createjs.Shadow('#0ceaed',0, 0, 10);
this.filters2[2] = new createjs.Shadow('#00ff2a',0, 0, 10);
this.filters2[3] = new createjs.Shadow('#de00ff',0, 0, 10);
this.filters2[4] = new createjs.Shadow('#f40045',0, 0, 30);
this.filters2[5] = new createjs.Shadow('#d8ff00',0, 0, 30);
this.filters2[6] = new createjs.Shadow('#ff8400',0, 0, 30);
this.filters2[7] = new createjs.Shadow('#7d36ff',0, 0, 30);
//setup
this.stagetools = new createjs.Stage('canvasTools');
this.stagetools.enableDOMEvents(true);
this.stagetools.enableMouseOver(10);
createjs.Touch.enable(this.stagetools);
this.stage = new createjs.Stage('canvas');
//this.stage.autoClear = true;
this.stage.enableDOMEvents(true);
this.stage.snapToPixelEnabled = true;
this.stage.enableMouseOver(10);
createjs.Touch.enable(this.stage);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', this.tick);
//loader
this.manifest = [
{src:'images/brush.png', id:'brush', link: 'tool'},
{src:'images/undo.png', id:'undo', link: 'tool'},
{src:'images/clear.png', id:'clear', link: 'tool'}
];
switch(chosenNum)
{
case 0: this.manifest.push({src:'images/boom.jpg',id:'fc0', link:'car'}); break;
case 1: this.manifest.push({src:'images/hellosunshine.jpg',id:'fc1', link:'car'}); break;
case 2: this.manifest.push({src:'images/iceicebaby.jpg',id:'fc2', link:'car'}); break;
case 3: this.manifest.push({src:'images/boom.jpg',id:'fc3', link:'car'}); break;
case 4: this.manifest.push({src:'images/hellosunshine.jpg',id:'fc4', link:'car'}); break;
case 5: this.manifest.push({src:'images/iceicebaby.jpg',id:'fc5', link:'car'}); break;
default: this.manifest.push({src:'images/hg10.jpg',id:'fc0', link:'car'}); break;
}
this.loader = new createjs.LoadQueue();
this.loader.on('complete', this.handleComplete);
this.loader.on("fileload", this.handleFileLoad);
this.loader.loadManifest(this.manifest);
//containers
this.backgroundContainer = new createjs.Container();
this.stage.addChild(this.backgroundContainer);
var ss = new createjs.Shape();
ss.graphics.beginFill("#000000").drawRect(0, 0, 960, window.innerHeight);
this.stageArea = new createjs.Container();
this.stageArea.snapToPixel = true;
this.stageArea.hitArea = ss;
this.backgroundContainer.addChild(this.stageArea);
this.container = new createjs.Container();
this.stage.addChild(this.container);
this.stageArea.addEventListener("mousedown", this.handleMouseDown);
this.stage.addEventListener("stagemousemove" , this.handleMouseMove);
},
handleFileLoad:function(e){
app.toolsAssets.push(e);
},
handleComplete:function(){
tools.init();
//background
for(var i = 0; i < app.toolsAssets.length; i++){
if(app.toolsAssets[i].item.link == "car"){
var imgLoader = app.loader.getResult(app.toolsAssets[i].item.id);
var img = new createjs.Bitmap(imgLoader);
app.backgroundBounds = img.getBounds();
app.backgroundContainer.addChild(img);
img.cache(0,0, img.getBounds().width, img.getBounds().height);
}
}
resize();
},
handleMouseDown:function(){
app.mouseDOWN = true;
app.NUM_LINES++;
var drawingCanvas = new createjs.Shape();
drawingCanvas.snapToPixel = true;
//drawingCanvas.cache(0, 0, app.stage.width, app.stage.height);
drawingCanvas.graphics.setStrokeStyle(tools.size, 'round', 'round');
app.container.addChild(drawingCanvas);
var drawingCanvas2 = new createjs.Shape();
drawingCanvas2.snapToPixel = true;
//drawingCanvas2.cache(0, 0, app.stage.width, app.stage.height);
drawingCanvas2.graphics.setStrokeStyle(tools.size-2, 'round', 'round');
app.container.addChild(drawingCanvas2);
var drawingCanvas3 = new createjs.Shape();
drawingCanvas3.snapToPixel = true;
//drawingCanvas3.cache(0, 0, app.stage.width, app.stage.height);
drawingCanvas3.graphics.setStrokeStyle(tools.size-3, 'round', 'round');
app.container.addChild(drawingCanvas3);
app.lineArray.push(drawingCanvas);
app.lineArray2.push(drawingCanvas2);
app.lineArray3.push(drawingCanvas3);
tools.undoArray.push(drawingCanvas);
tools.undoArray2.push(drawingCanvas2);
tools.undoArray3.push(drawingCanvas3);
tools.selectedArray.push(tools.SELECTED);
app.oldPt = new createjs.Point(app.stage.mouseX - app.stage.canvas.width/2, app.stage.mouseY-app.stage.canvas.height/2);
app.oldMidPt = app.oldPt;
app.stage.addEventListener("stagemousemove" , app.handleMouseMove);
},
handleMouseMove:function(){
app.stage.removeEventListener("stagemousemove" , app.handleMouseMove);
app.stageArea.addEventListener("pressup", app.handleMouseUp);
},
handleMouseUp:function(){
app.mouseDOWN = false;
app.stageArea.addEventListener("mousedown", app.handleMouseDown);
app.stageArea.removeEventListener("pressup", app.handleMouseUp);
for(var i = 0; i < app.lineArray.length; i++){
app.lineArray[i].shadow = app.filters[ tools.selectedArray[i] ];
app.lineArray2[i].shadow = app.filters2[ tools.selectedArray[i] ];
app.lineArray3[i].shadow = new createjs.Shadow('#ffffff',0, 0, 6);
}
app.stage.update();
},
tick:function(){
if(app.mouseDOWN){
app.midPt = new createjs.Point(app.oldPt.x + app.stage.mouseX - app.stage.canvas.width/2>>1, app.oldPt.y+app.stage.mouseY - app.stage.canvas.height/2>>1);
app.lineArray[app.NUM_LINES].graphics
.beginStroke('#ffffff')
.moveTo(app.midPt.x, app.midPt.y)
.curveTo(app.oldPt.x, app.oldPt.y, app.oldMidPt.x, app.oldMidPt.y);
app.lineArray2[app.NUM_LINES].graphics
.beginStroke('#ffffff')
.moveTo(app.midPt.x, app.midPt.y)
.curveTo(app.oldPt.x, app.oldPt.y, app.oldMidPt.x, app.oldMidPt.y);
app.lineArray3[app.NUM_LINES].graphics
.beginStroke('#ffffff')
.moveTo(app.midPt.x, app.midPt.y)
.curveTo(app.oldPt.x, app.oldPt.y, app.oldMidPt.x, app.oldMidPt.y);
app.oldPt.x = app.stage.mouseX;
app.oldPt.y = app.stage.mouseY;
app.oldMidPt.x = app.midPt.x;
app.oldMidPt.y = app.midPt.y;
app.stage.update();
}
}
}
var tools = {
selectedArray:[],
undoArray:[],
undoArray2:[],
undoArray3:[],
palettes: ['#0066cc', '#0ceaed', '#00ff2a', '#de00ff', '#f40045', '#d8ff00','#ff8400','#7d36ff'],
sizes:[6, 10, 15],
colourPallette:null,
paletteColours: null,
brushSizes:null,
toolsContainer:null,
size: 8,
toolsScale:1,
COLOUR: '#0066cc',
SELECTED:0,
init:function(){
//colour pallette
this.toolsContainer = new createjs.Container();
this.toolsContainer.x = app.stagetools.canvas.width/2 - 150;
this.toolsContainer.y = app.stagetools.canvas.height/2 + 10;
app.stagetools.addChild(this.toolsContainer);
this.colourPallette = new createjs.Shape();
this.colourPallette.name = 'colourPallette';
this.colourPallette.graphics.beginFill(tools.COLOUR);
this.colourPallette.graphics.setStrokeStyle(4, 'round').beginStroke("#FFFFFF");
this.colourPallette.graphics.drawCircle(0,0,22);
this.colourPallette.addEventListener('click', this.palletteHandler);
this.toolsContainer.addChild(this.colourPallette);
this.paletteColours = new createjs.Container();
this.paletteColours.visible = false;
this.toolsContainer.addChild(this.paletteColours);
for(var i = 0; i < this.palettes.length; i++){
var palette = new createjs.Shape();
palette.name = 'palette' + i;
palette.graphics.beginFill(this.palettes[i]);
palette.graphics.drawCircle(0,0,15);
palette.addEventListener('click', this.palletteHandler);
palette.x = (i * 50);
palette.y = -50;
this.paletteColours.addChild(palette);
}
//brush tool
var brush = new createjs.Bitmap(app.loader.getResult('brush'));
brush.name = 'brush';
brush.x = 50;
brush.y = -34;
brush.addEventListener('click', this.brushHandler);
this.toolsContainer.addChild(brush);
this.brushSizes = new createjs.Container();
this.brushSizes.x = brush.x + 40;
this.brushSizes.y = brush.y - 20;
this.brushSizes.visible = false;
this.toolsContainer.addChild(this.brushSizes);
for(var p = 0; p < this.sizes.length; p++){
var size = new createjs.Shape();
size.name = 'size'+p;
size.graphics.beginFill('#FFFFFF');
size.graphics.drawCircle(0,0,this.sizes[p]);
size.addEventListener('click', this.brushHandler);
size.x = (p==1) ? p * 40 : p * 45;
this.brushSizes.addChild(size);
}
//undo tool
var undo = new createjs.Bitmap(app.loader.getResult('undo'));
undo.name = 'undo';
undo.x = brush.x + 90;
undo.y = brush.y;
undo.addEventListener('click', this.undoHandler);
this.toolsContainer.addChild(undo);
//trash tool
var clear = new createjs.Bitmap(app.loader.getResult('clear'));
clear.name = 'clear';
clear.x = undo.x + 90;
clear.y = undo.y;
clear.addEventListener('click', this.clearHandler);
this.toolsContainer.addChild(clear);
},
brushHandler:function(e){
tools.paletteColours.visible = false;
tools.brushSizes.visible = false;
switch(e.target.name)
{
case 'size0': tools.size = 6; break;
case 'size1': tools.size = 10; break;
case 'size2': tools.size = 15; break;
case 'brush': tools.brushSizes.visible = true; break;
}
app.stagetools.update();
},
palletteHandler:function(e){
tools.paletteColours.visible = false;
tools.brushSizes.visible = false;
switch(e.target.name)
{
case 'colourPallette': tools.paletteColours.visible = true; break;
case 'palette0':
tools.SELECTED = 0;
tools.COLOUR = '#0066cc';
break;
case 'palette1':
tools.SELECTED = 1;
tools.COLOUR = '#0ceaed';
break;
case 'palette2':
tools.SELECTED = 2;
tools.COLOUR = '#00ff2a';
break;
case 'palette3':
tools.SELECTED = 3;
tools.COLOUR = '#de00ff';
break;
case 'palette4':
tools.SELECTED = 4;
tools.COLOUR = '#f40045';
break;
case 'palette5':
tools.SELECTED = 5;
tools.COLOUR = '#d8ff00';
break;
case 'palette6':
tools.SELECTED = 6;
tools.COLOUR = '#ff8400';
break;
case 'palette7':
tools.SELECTED = 7;
tools.COLOUR = '#7d36ff';
break;
}
tools.colourPallette.graphics.beginFill(tools.COLOUR);
tools.colourPallette.graphics.drawCircle(0,0,22);
app.stagetools.update();
},
undoHandler:function(){
if(tools.undoArray.length){
var lastItem = tools.undoArray.pop();
app.container.removeChild(lastItem);
var lastItem2 = tools.undoArray2.pop();
app.container.removeChild(lastItem2);
var lastItem3 = tools.undoArray3.pop();
app.container.removeChild(lastItem3);
app.stage.update();
}
},
clearHandler:function(){
app.container.removeAllChildren();
app.container.removeAllEventListeners();
app.stage.update();
},
}