javascript - 我想通过单击 HTML 按钮在 Canvas 中画一条线，我试过了，但它不起作用-6ren

javascript - 我想通过单击 HTML 按钮在 Canvas 中画一条线，我试过了，但它不起作用

转载作者：行者123 更新时间：2023-11-28 10:48:42

这是 html 文件中的部分，它应该在第一次加载时创建一个新的 HangmanView，这很好，但是当我想通过按下按钮来绘制这些部分时，它什么也不做。

<!DOCTYPE>
<html>
<head>
    <title> Draw Hangman</title>
    <link rel="stylesheet" href="hangman.css" type="text/css"/>
    <script src="hangman.js" language="javascript" type="text/javascript"/>
</head>
<script>
    var hm = null;
</script>
<body>
    <article>
        <h1>Drawing Hangman Part</h1>

        <canvas id="hangman" onload="hm = new HangmanView(document.getElementById('hangman'));">Sorry your browser doesn"t support canvas</canvas><br/>
            <input id="drawbutton0" type="button" value="Floor" onClick="hm.drawPart(0);"/>
            <input id="drawbutton1" type="button" value="V. Beam" onClick="hm.drawPart(1);"/>
            <input id="drawbutton2" type="button" value="Bridging" onClick="hm.drawPart(2);"/><br/>
            <input id="drawbutton3" type="button" value="H. Beam" onClick="hm.drawPart(3);"/>
            <input id="drawbutton4" type="button" value="Rope" onClick="hm.drawPart(4);"/>
            <input id="drawbutton5" type="button" value="Head" onClick="hm.drawPart(5);"/><br/>
            <input id="drawbutton6" type="button" value="Body" onClick="hm.drawPart(6);"/>
            <input id="drawbutton7" type="button" value="Arms" onClick="hm.drawPart(7);"/>
            <input id="drawbutton8" type="button" value="Legs" onClick="hm.drawPart(8);"/><br/>
        <br/>
        <br/>
        <input id="clear" type="button" value="Clear" onClick="hm.clear();"/>
    </article>
</body>

这是js代码，它使用HangmanView作为所有部件的数组，部件本身都有一个drawParts函数来绘制到 Canvas 上。

HangmanView = function(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "red";
    ctx.fillRect(0,0,150,75);
    ctx.lineWidth = "5";

    this.hangmanParts = new Array();
    this.hangmanParts[0] = new Floor(ctx);
    this.hangmanParts[1] = new VerticalBeam(ctx);
    this.hangmanParts[2] = new Bridging(ctx);
    this.hangmanParts[3] = new HorizontalBeam(ctx);
    this.hangmanParts[4] = new Rope(ctx);
    this.hangmanParts[5] = new Head(ctx);
    this.hangmanParts[6] = new Body(ctx);
    this.hangmanParts[7] = new Arms(ctx);
    this.hangmanParts[8] = new Legs(ctx);

}


HangmanView.prototype.draw = function() {
    for(var i = 0; i < this.hangmanParts.length; i++) {
        this.hangmanParts[i].drawPart();
    }
}

HangmanView.prototype.drawPart = function(level) {
    if(0 <= level && level <= 8) {
        this.hangmanParts[level].drawParts();
    }
}


function Floor(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        conlineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function VerticalBeam(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(80, 140);
        con.lineTo(80, 140);
        con.stroke();
        con.closePath();
    }
}

function Bridging(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function HorizontalBeam(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Rope(ctx) {
    var con = ctx; 

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Head(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();;
    }
}

function Body(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Arms(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Legs(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

这是该网站到目前为止的样子:
Drawing Hangman Parts

(我敢打赌这是我的代码中的一个非常简单的错误)

最佳答案

它进行了一些更改并且有效，如果有效，请投票

<html>
<head>
    <title> Draw Hangman</title>

</head>

<body>

        <h1>Drawing Hangman Part</h1>

        <canvas id="hangman" onload="setHM" width="400" height="300">Sorry your browser doesn"t support canvas</canvas><br/>
            <input id="drawbutton0" type="button" value="Floor" onClick="hm.drawPart(0);"/>
            <input id="drawbutton1" type="button" value="V. Beam" onClick="hm.drawPart(1);"/>
            <input id="drawbutton2" type="button" value="Bridging" onClick="hm.drawPart(2);"/><br/>
            <input id="drawbutton3" type="button" value="H. Beam" onClick="hm.drawPart(3);"/>
            <input id="drawbutton4" type="button" value="Rope" onClick="hm.drawPart(4);"/>
            <input id="drawbutton5" type="button" value="Head" onClick="hm.drawPart(5);"/><br/>
            <input id="drawbutton6" type="button" value="Body" onClick="hm.drawPart(6);"/>
            <input id="drawbutton7" type="button" value="Arms" onClick="hm.drawPart(7);"/>
            <input id="drawbutton8" type="button" value="Legs" onClick="hm.drawPart(8);"/><br/>
        <br/>
        <br/>
        <input id="clear" type="button" value="Clear" onClick="hm.clear();"/>


    <script>
    var hm = null;
    HangmanView = function(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "red";
    ctx.fillRect(0,0,150,75);
    ctx.lineWidth = "5";

    this.hangmanParts = new Array();
    this.hangmanParts[0] = new Floor(ctx);
    this.hangmanParts[1] = new VerticalBeam(ctx);
    this.hangmanParts[2] = new Bridging(ctx);
    this.hangmanParts[3] = new HorizontalBeam(ctx);
    this.hangmanParts[4] = new Rope(ctx);
    this.hangmanParts[5] = new Head(ctx);
    this.hangmanParts[6] = new Body(ctx);
    this.hangmanParts[7] = new Arms(ctx);
    this.hangmanParts[8] = new Legs(ctx);

}


HangmanView.prototype.draw = function() {
    for(var i = 0; i < this.hangmanParts.length; i++) {
        this.hangmanParts[i].drawPart();
    }
}

HangmanView.prototype.drawPart = function(level) {
    if(0 <= level && level <= 8) {
        this.hangmanParts[level].drawParts();
    }
}


function Floor(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        conlineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function VerticalBeam(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(80, 140);
        con.lineTo(80, 140);
        con.stroke();
        con.closePath();
    }
}

function Bridging(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function HorizontalBeam(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Rope(ctx) {
    var con = ctx; 

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Head(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();;
    }
}

function Body(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Arms(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}

function Legs(ctx) {
    var con = ctx;

    this.drawParts = function() {
        con.beginPath();
        con.moveTo(10, 140);
        con.lineTo(180, 140);
        con.stroke();
        con.closePath();
    }
}
(function() {
  hm = new HangmanView(document.getElementById('hangman'));
    console.log(hm);
})();
function setHM(){
hm = new HangmanView(document.getElementById('hangman'));
    console.log(hm);
}


    </script>


</body>


</html>

关于javascript - 我想通过单击 HTML 按钮在 Canvas 中画一条线，我试过了，但它不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37742129/

文章推荐： javascript - 如何将此curl 转换为jQuery AJAX POST？

文章推荐： CSS nth-child，穿越 Twig

文章推荐： javascript - 在 Google Chrome 之外测试 Jquery 链接

java - headless 画
我想以 headless 模式(屏幕上根本没有 GUI)将 JPanel 绘制到 BufferedImage 中。 final JPanel panel = createPanel(); panel.
javascript - 如何实现更逼真的粒子漂 float 画？
我是 Canvas 的新手，正在尝试创建看起来逼真的 float 粒子动画。目前，我正在创建 400 个随机散布在 400x400 Canvas 上的粒子。然后，在每个 requestAnimat
css - 如何在悬停时停止悬 float 画
有没有办法在悬停时停止悬 float 画？ :hover 这是一个显示动画的链接: https://codepen.io/youbiteme/pen/RprPrN 最佳答案只需为您的 svg 悬停添
java - 画 donut 谷歌地图Android
我想在谷歌地图上绘制覆盖图，其中除了特定点周围 1.5 公里半径以外的所有内容都被遮蔽了。为此，我尝试使用带有大量边框的圆圈，所以我会在边框中放置透明中心和覆盖颜色来实现这一点，但它无法渲染。
ios - 画(_直角: CGRect) not getting called in custom view
我正在尝试通过扩展类 UIView 来创建自定义 View ，该类可以在自定义 View 的中心显示一个圆圈。为了添加自定义绘图，我重写了 draw(_ rect: CGRect) 方法，如下所示。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我想通过单击 HTML 按钮在 Canvas 中画一条线，我试过了，但它不起作用