在html表中绘制画布;不能在JavaScript中工作

Drawing a canvas in a html-table doesn´t work in JavaScript

本文关键字：不能 JavaScript 工作 html 绘制      更新时间：2023-09-26

首先，我得到了一个简单的解决方案，可以用来绘制画布元素。HTML中的代码如下：

...
<td align="center" class="TableUnten" id="Gesamtleistung0">
            <canvas id="myCanvas"></canvas>                
            <script type="text/javascript">
                drawCanvas("myCanvas");
            </script>
</td>
...

js:

function drawCanvas(canvasname) {
    var cv = document.getElementById(canvasname);
    var ctx = cv.getContext('2d');
    //...

这项工作和画布将显示在表中。

但现在我想在一个单独的.js文件中进行函数调用。所以我认为这可以工作：

function tester() {
    document.getElementById("Gesamtleistung0").innerHTML = drawCanvas("myCanvas");
}

问题是变量cv不包含画布元素的名称"mycanvas"，而是显示"null"。而变量canvasname是用"myCanvas"声明的。

你知道我可以做些什么来调用我的画布绘制函数，然后将其放入表格中吗？

感谢

确保在页面的头部引用了其他javascript绘图文件

<head>
    <script type="text/javascript" src="yourDrawingFile.js"></script>
</head>

由于您已经在Gesamtleistung0中创建了画布，因此您应该能够在该外部脚本中直接调用drawCanvas，而无需设置任何innerHTML。

<script>
window.onload=function(){
    ....
    function tester(){
        drawCanvas("myCanvas");
    }
....

看看我刚刚完成的这个例子，也许它会对你有所帮助。看一下顶部柱子的底部。在函数中在画布上绘制圆时出错，在函数外工作正常

相关文章：