javascript - HTML Canvas 不会画线

Question

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

索引.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()  

一些画布教程：

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

Answer 2

你应该删除你的'['试试这个：

b_canvas = document.getElementById("chart1");
        var b_context = b_canvas.getContext("2d");
            b_context.moveTo(11,0);
            b_context.lineTo(200,300);
            b_context.stroke();