javascript - HTML Canvas 不会画线

Question

我有以下代码来绘制一条线，但它不会绘制。我只看到 Canvas 边框。我在控制台中没有看到任何错误。

index.html:

<div id="chart_area">
     <canvas id="chart1" width="800" height="600"></canvas>
</div>
...
<script>
     processChart()
</script>

样式.css:

#chart_area
 {
 text-align:center;
 color:red;

 } 

 #chart1
 {
 text-align:center;
 border:solid;
 color:blue;

 } 

#control_panel
 {
 text-align:center;
 color:red;
 float:right;
 clear:both;
 }  

图表.js:

function processChart() {
        var b_canvas = document.getElementById("chart1");
        var b_context = b_canvas.getContext("2d");
            b_context.moveTo([0,0]);
            b_context.lineTo([300,300]);
            b_context.stroke()  
}

Answer 1

这些函数采用两个参数，而不是数组。另外，请务必在绘制路径之前调用 beginPath，如果不这样做，稍后您会感到困惑:) 您的代码应该是

b_context.beginPath();
b_context.moveTo(0, 0);
b_context.lineTo(300, 300);
b_context.stroke()  

一些 Canvas 教程:

• MDN总是好的。
• This one来自 html5tutorial.info 看起来不错并且专注于路径绘制。