Question

我一直在研究交互式平面图，当你按下按钮时，它会在Canvas元素上绘制。我越是一直在研究这个问题，我就越发识到它甚至可能不可能 - 任何想法？这是我完成了多少代码（显然不能按预期工作）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <ul id="nav">
        <div id="buttons">
            <input type="button" id="clear" value="118">
        </div>
    </ul>
    <div id="main">
        <canvas id="118" width="1200" height="630" style="border:1px solid #d3d3d3;"></canvas>
        <script>
            var canvas = document.getElementById("canvas118");
            var context = canvas.getContext("2d");

            document.getElementById('clear').addEventListener('click', function() {
                context.moveTo(87,354);
                context.lineTo(169,426);
                context.lineTo(277,397);
                context.lineTo(198,324);
                context.lineTo(87,354);

                context.fillstyle = "#ff0000";
                context.fill();
                context.strokeStyle = "#ff0000";
                context.stroke();
            });
        </script>
    </div>
</body>
</html>

Answer 1

对我来说，就像你错过了对beginPath()的号召......试试这样：

var c=document.getElementById("canvas118");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

取自here。

Answer 2

这是您的代码工作/更改： https://jsfiddle.net/dxhytwf4/2/

创建了一个函数并直接在输入上添加了click事件：

<input type="button" id="clear" value="118" onclick="draw()" />

使用Javascript：

function draw() {
    var canvas = document.getElementById("118");
    var context = canvas.getContext("2d");
    ...

你也得到了元素canvas118而不是118

使用按钮在Canvas上绘制

2 个答案: