一个不错的选色网站

　　好的，这是一个比较复杂的任务，需要用到CreateJS中的很多功能，我会逐步为你介绍。

　　首先，我们需要创建一个Canvas元素来作为我们的画布，然后创建一个Stage对象来管理Canvas元素中的所有显示对象。

　　```javascript

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

　　var stage = new createjs.Stage(canvas);

　　```

　　接下来，我们需要创建一个矩形来作为房间的背景，以及一个矩形来作为绘画区。

　　```javascript

　　var roomBg = new createjs.Shape();

　　roomBg.graphics.beginFill("#8bc34a").drawRect(0, 0, canvas.width, canvas.height);

　　stage.addChild(roomBg);

　　var drawingArea = new createjs.Shape();

　　drawingArea.graphics.beginStroke("#000000").drawRect(30, 50, canvas.width - 60, canvas.height - 100);

　　stage.addChild(drawingArea);

　　```

　　在这里，我们使用了Shape对象来创建矩形，beginFill()和beginStroke()方法用来设置填充和描边的颜色，drawRect()方法用来绘制矩形。

　　接下来，我们需要创建选色框、画笔大小、橡皮擦、清空选项和导出发送框。我们可以使用CreateJS中提供的一些UI组件来完成这些操作。

　　```javascript

　　var colorPicker = new createjs.ColorPicker();

　　colorPicker.x = 30;

　　colorPicker.y = 10;

　　stage.addChild(colorPicker);

　　var brushSizeSlider = new createjs.Slider();

　　brushSizeSlider.x = 150;

　　brushSizeSlider.y = 10;

　　brushSizeSlider.minimum = 1;

　　brushSizeSlider.maximum = 50;

　　brushSizeSlider.snapToTicks = true;

　　brushSizeSlider.value = 10;

　　stage.addChild(brushSizeSlider);

　　var eraserButton = new createjs.Shape();

　　eraserButton.graphics.beginFill("#ffffff").drawCircle(0, 0, 20);

　　eraserButton.x = 300;

　　eraserButton.y = 20;

　　stage.addChild(eraserButton);

　　var clearButton = new createjs.Shape();

　　clearButton.graphics.beginFill("#ffffff").drawRect(0, 0, 60, 30);

　　clearButton.x = 360;

　　clearButton.y = 20;

　　stage.addChild(clearButton);

　　var exportButton = new createjs.Shape();

　　exportButton.graphics.beginFill("#ffffff").drawRect(0, 0, 60, 30);

　　exportButton.x = canvas.width - 90;

　　exportButton.y = 20;

　　stage.addChild(exportButton);

　　```

　　在这里，我们使用了ColorPicker、Slider和Shape组件来创建选色框、画笔大小、橡皮擦、清空选项和导出发送框。这些组件可以通过设置x和y属性来定位它们在Canvas元素中的位置，也可以通过设置其他属性来自定义它们的外观和行为。

　　最后，我们需要让用户能够在绘画区中绘制图形。为此，我们可以监听Canvas元素上的鼠标事件，并使用Shape对象来绘制用户所绘制的线条。

　　```javascript

　　var drawingStroke = "#000000";

　　var drawingStrokeSize = 10;

　　var isDrawing = false;

　　drawingArea.on("mousedown", startDrawing);

　　drawingArea.on("pressmove", draw);

　　drawingArea.on("pressup", stopDrawing);

　　function startDrawing(event) {

　　isDrawing = true;

　　drawingArea.graphics.setStrokeStyle(drawingStrokeSize).beginStroke(drawingStroke).moveTo(event.localX, event.localY);

　　}

　　function draw(event) {

　　if (isDrawing) {

　　drawingArea.graphics.lineTo(event.localX, event.localY).stroke();

　　}

　　}

　　function stopDrawing(event) {

　　isDrawing = false;

　　}

　　```

　　在这里，我们创建了一个isDrawing变量来跟踪用户是否正在绘制，然后监听了mousedown、pressmove和pressup事件来开始、绘制和停止用户的绘画行为。在startDrawing()函数中，我们创建了一个新的Shape对象来绘制用户的线条；在draw()函数中，我们使用lineTo()方法来更新线条的位置；在stopDrawing()函数中，我们将isDrawing变量重置为false。

　　现在，我们已经完成了一个简单的画画房间的制作。用户可以在绘画区中绘制线条，并使用UI组件来选择颜色、画笔大小、橡皮擦、清空选项和导出发送框。您可以根据需要进一步自定义和优化这个画画房间，例如添加撤销和重做功能、保存绘画到本地文件等等。