Question

我正在努力做到这一点，当你点击其中一张幸福的脸时，你会得到一个警告框，上面写着“谢谢你的反馈”，但我目前还不确定是否会在我的码！谢谢！这是小提琴http://jsfiddle.net/bsjs9/

    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>SmileMore</title>

    </head>
    <body>

    <h1>
                        Bring your Charts to life with HTML5 Canvas</h1>
                </hgroup>
                <p>
                    Rendering Dynamic charts in JS
                </p>
                <div class="smile">
    <canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE"></canvas>
        <canvas id="canvas" width="200" height="200" style="border:1px solid #EEE"></canvas>   
         </div>

                <script>
                  var FacePainter = function(canvasName)
{
    var canvas = document.getElementById(canvasName);
    var ctx = canvas.getContext("2d");

    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 75;
    var startAngle = 0;
    var endAngle = 2 * Math.PI;

    function drawFace() {
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle);
        ctx.stroke();
        ctx.fillStyle = "yellow";
        ctx.fill();
    }

    function drawSmile(startAngle, endAngle)
    {
        var x = canvas.width / 2;
        var y = 150;
        var radius = 40;

        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle * Math.PI, endAngle * Math.PI);
        ctx.lineWidth = 7;

        // line color
        ctx.strokeStyle = 'black';
        ctx.stroke();
    }

    function drawEyes() {
        var centerX = 40;
        var centerY = 0;
        var radius = 10;

        // save state
        ctx.save();

        // translate context so height is 1/3'rd from top of enclosing circle
        ctx.translate(canvas.width / 2, canvas.height / 3);

        // scale context horizontally by 50%
        ctx.scale(.5, 1);

        // draw circle which will be stretched into an oval
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        // restore to original state
        ctx.restore();

        // apply styling
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        //left eye
        var centerX = -40;
        var centerY = 0;
        var radius = 10;

        // save state
        ctx.save();

        // translate context so height is 1/3'rd from top of enclosing circle
        ctx.translate(canvas.width / 2, canvas.height / 3);

        // scale context horizontally by 50%
        ctx.scale(.5, 1);

        // draw circle which will be stretched into an oval
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        // restore to original state
        ctx.restore();

        // apply styling
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.stroke();
    }

    this.drawHappyFace = function() {
        drawFace();
        drawEyes();
        drawSmile(1.1, 1.9);
    }

    this.drawSadFace = function() {
        drawFace();
        drawEyes();
        drawSmile(1.9, 1.1);

        ;
    }
}

new FacePainter('canvas').drawHappyFace();
new FacePainter('myDrawing').drawSadFace();



                </script>    

</body>
</html>
</body>
</html>

作为一项额外的任务，我想知道是否有人知道如何解决“快乐”的微笑，有点远！谢谢大家！

Answer 1

由于你在自己的画布上绘制了快乐的脸，你可以简单地在画布上放置一个onclick处理程序。

<canvas id="myDrawing" width="200" height="200" style="border:1px solid #EEE" onclick="alert('thanks');"></canvas>

关于微笑，我向ofsy添加了一个新的drawSmile参数，该参数会垂直偏移圆弧原点。

这是updated fiddle。

如果您只想显示提醒，当用户点击里面时，您需要获取点击坐标并针对该圈点击它。您可以在this fiddle中看到这一点。

向画布面添加警报

1 个答案: