html5 canvas 畫直線

 canvas loading...

成功了!雖然從這條簡單的線段怎么也想象不到最新最美的圖畫，不過與以前的拉伸圖像、怪異的CSS和DOM對象以及其他怪異的實現形式相比，使用基本的HTML技術在任意兩點間繪制一條線段已經是非常大的進步了。從現在開始，就把那些怪異的做法永遠忘掉吧。 從上面的代碼清單中可以看出，canvas中所有的操作都是通過上下文對象來完成的。在以后的canvas編程中也一樣，因為所有涉及視覺輸出效果的功能都只能通過上下文對象而不是畫布對象來使用。這種設計使canvas擁有了良好的可擴展性，基於從其中抽象出的上下文類型，canvas將來可以支持多種繪制模型。雖然本章經常提到對canvas采取什么樣的操作，但讀者應該明白，我們實際操作的是畫布所提供的上下文對象。    如前面示例演示的那樣，對上下文的很多操作都不會立即反映到頁面上。beginPath、moveTo以及lineTo這些函數都不會直接修改canvas的展示結果。canvas中很多用於設置樣式和外觀的函數也同樣不會直接修改顯示結果。只有當對路徑應用繪制(stroke)或填充(fill)方法時，結果才會顯示出來。否則，只有在顯示圖像、顯示文本或者繪制、填充和清除矩形框的時候，canvas才會馬上更新。

<script type="text/javascript">   
        function load() {   
            canvas = document.getElementById("cv");   
            ctx = canvas.getContext("2d");   
                        ctx.beginPath();   
                        ctx.moveTo(70,140);   
                        ctx.lineTo(140,70);   
                        ctx.stroke();   
        };   
  
           
</script>