Canvas學習筆記之畫線

1.使用getelementbyid()獲取canvas元素。

2.獲取canvas的繪製環境getcontext()。

3.進行繪製畫筆的粗細和顏色定義，分別是linewidth和strokestyle。

4.告訴系統開始繪製beginpath()。

5.制定畫筆游標moveto(x, y)。

6.進行路徑繪製lineto(x, y)。

7.進行繪製圖形顏色繪製。

1.ie8以下瀏覽器不支援，可以使用excanvas進行模仿canvas。

2.canvas的畫布大小是要在標籤中宣告中就要定義的，所以，提前定義好width和height。

lang="en">

charset="utf-8">
head>
id="mycanvas"
width="200"
height="100">您的瀏覽器不支援html5canvas>
// var c = document.getelementbyid('mycanvas');
// var ctx = c.getcontext('2d');
// ctx.linewidth = 10;
// ctx.strokestyle = '#f00';
// ctx.beginpath();
// ctx.moveto(10, 10);
// ctx.lineto(150, 50);
// ctx.stroke();
// 三種線帽
var c = document.getelementbyid('mycanvas');
var ctx = c.getcontext('2d');
ctx.linewidth = 10;
ctx.strokestyle = '#f00';
//預設筆帽，平直邊緣
ctx.linecap = 'butt';
ctx.beginpath();
ctx.moveto(10, 10);
ctx.lineto(150, 10);
ctx.stroke();
//圓頭筆帽
ctx.linecap = 'round';
ctx.beginpath();
ctx.moveto(10, 40);
ctx.lineto(150, 40);
ctx.stroke();
//方格筆帽
canvas入門之畫線
在hmtl 中建立好canvas之後，就可以在js裡面對canvas進行操作了 var canvas document.getelementbyid canvas var context canvas.getcontext 2d 獲取繪圖上下文環境 canvas.width 500 設定畫布寬高 c...
canvas學習筆記
1 canvas 元素a 元素有乙個叫做 getcontext 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能，通過簡單的測試getcontext 方法的存在，指令碼可以檢查程式設計支援性var canvas document.getelementbyid tutorial if canvas....
canvas學習筆記
canvas是html5中的新功能，它是一塊，在你開闢的空間內部用 畫圖。而建立畫布和畫圖是需要一些步驟的 canvas是布 context是各種筆 先看乙個簡單的 瀏覽器不支援canvas 每乙個我們要進行的canvas操作都必須有獲取畫布，和獲取畫布內容的操作。然後還有乙個問題就是，我們要預防老...