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