javascript - websocket(socket.io)上的协作白板(Canvas)圈

我正在尝试使用html5 canvas，nodejs和websockets（socket.io）做一些协作式（在线）白板应用程序，我的过程进展顺利，但我想画个圆圈。实际上我可以画线，并且（例如）我认为圆就像线，线的起点必须是圆的中心，线的起点和终点之间的距离必须是圆的半径。但是我无法将这个想法转换为代码。 :(

我的绘画功能的客户端代码。

function draw(data, fromMe){
        if(DP.thisObj[data.id]){
            var eventType = _eventTypes(data.isTouchDevice),
            ctx = DP.thisObj[data.id].ctx,
            scratchCtx = DP.thisObj.scratch.ctx;

            //set the ctx
            ctx.strokeStyle = data.color;
            ctx.lineWidth = data.stroke;
            ctx.lineCap = "round";
            ctx.lineJoin = "round";

            scratchCtx.strokeStyle = data.color;
            scratchCtx.lineWidth = data.stroke;
            scratchCtx.lineCap = "round";
            scratchCtx.lineJoin = "round";

            if(data.isErase){
                ctx.globalCompositeOperation = "destination-out";
                scratchCtx.globalCompositeOperation = "destination-out";
            } else {
                ctx.globalCompositeOperation = "source-over";
                scratchCtx.globalCompositeOperation = "source-over";
            }


            if (data.type === eventType.down) {
                DP.okToDraw = true;
                if(fromMe && !data.isLineDrawing){
                    DP.points.push({x : data.x, y : data.y});
                } else if(data.isLineDrawing) { //for line drawing we only need the coords
                    DP.thisObj[data.id].x = data.x;
                    DP.thisObj[data.id].y = data.y;
                } else { //from a shared canvas
                    ctx.beginPath();
                    ctx.moveTo(data.x, data.y);
                }
            } else if ((data.type === eventType.move) && DP.okToDraw) {


                if(data.isLineDrawing && fromMe) {  //draw the line on a temp canvas
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                    scratchCtx.beginPath();
                    scratchCtx.moveTo(DP.thisObj[data.id].x, DP.thisObj[data.id].y);
                    scratchCtx.lineTo(data.x, data.y);
                    scratchCtx.stroke();
                } else if(fromMe){
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                    DP.points.push({x : data.x, y : data.y});
                    _drawPoints(scratchCtx);
                } else if(!data.isLineDrawing) { //this is coming from drawing a shared canvas
                    ctx.lineTo(data.x, data.y);
                    ctx.stroke();
                }
            } else if(data.type === eventType.up){
                if(data.isLineDrawing) {    //when done put the scratch line on the scratch canvas
                    ctx.beginPath();
                    ctx.moveTo(DP.thisObj[data.id].x, DP.thisObj[data.id].y);
                    ctx.lineTo(data.x, data.y);
                    ctx.stroke();
                    ctx.closePath();
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                } else if(fromMe){
                    ctx.drawImage(DP.scratchCanvas, 0, 0);
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                } else {
                    ctx.closePath();
                }
                DP.okToDraw = false;
                scratchCtx.closePath();

                DP.points = [];
            }
        }

    }

这是绘制func的服务器端代码。 server.js

(function () {
    var connectedClients = {}, //used to keep a working list of the connections
        io = require('socket.io').listen(4000);

    io.sockets.on('connection', function (socket) {


        //drawing data
        socket.on('drawRequest', function (data) {
            socket.broadcast.emit('draw', {
                x: data.x,
                y: data.y,
                type: data.type,
                isTouchDevice : data.isTouchDevice,
                color: data.color,
                stroke: data.stroke,
                isLineDrawing: data.isLineDrawing,
                isErase: data.isErase,
                id: data.id
            });
        });

    });
}).call(this);

最佳答案

您需要一个arc

arc(x, y, radius, startAngle, endAngle, anticlockwise)

DMO

var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();