使用JavaScript无法绘制到HTML5画布的线条

Question

我正在使用以下代码在html画布上画一条线。 但不幸的是，我在画布上看不到任何线条。 我什至没有发现任何错误。

    <!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <br> <br> <br>
        <input id="start" type="button" value="Start" onclick="startstop()" />
        <input type="button" value="Turn Left" />
        <input type="button" value="Turn Right" />
         <br> <br>

        <canvas id="Canvas" style="width:800px; height: 600px; border: 1px solid black;"> </canvas>

         <script>

             function startstop(){
                 var elem = document.getElementById("start");
                if (elem.value==="Start")
                {
                    elem.value = "Stop";
                    var mycanvas=document.getElementById("Canvas");
                   // alert(mycanvas);
                    var ctx=mycanvas.getContext('2d');
                    ctx.beginPath();
                    ctx.moveTo(10,400);
                    ctx.lineTo(200,400); 
                    ctx.lineWidth=10;
                    ctx.strokeStyle="#ff0000";
                    ctx.stroke();     
                }
                   else
                       elem.value = "Start";
             }
         </script>
</body>

这是代码的jsfiddle http://jsfiddle.net/8ebLLwa9/有人可以帮助我找到错误吗？

Answer 1

您的画布高度/宽度应该是画布本身的属性，而不是样式属性：

<canvas id='Canvas' width="800px" height="600px" style="border: 1px solid black;"></canvas>

另外，对于您的jsfiddle，将加载状态从“ onLoad”更改为“ No wrap-in head”

Answer 2

使用css样式的属性width和height insetad定义画布：

<canvas id='Canvas' width='800' height='600' style="border: 1px solid black;"> </canvas>

使用JavaScript无法绘制到HTML5画布的线条

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-02-09 22:16:19

解决方案2
1 2015-02-09 22:18:14

使用JavaScript无法绘制到HTML5画布的线条

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-02-09 22:16:19

解决方案2 1 2015-02-09 22:18:14

解决方案1
2 已采纳 2015-02-09 22:16:19

解决方案2
1 2015-02-09 22:18:14