Canvas學習筆記之畫線

2021-08-03 13:49:00 字數 1547 閱讀 5572

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操作都必須有獲取畫布,和獲取畫布內容的操作。然後還有乙個問題就是,我們要預防老...