前端 學習筆記 一 canvas畫布

"mycanvas"
width
="200"
height
="100"
style
="border
:1px solid #000000;
">
canvas
>

//根據名字確定畫布
var c=document.
getelementbyid
("mycanvas");
//建立 context 物件,getcontext("2d") 物件是內建的 html5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法
var ctx=c.
getcontext
("2d");
//下面是在畫布內畫乙個矩形
// 設定fillstyle的屬性可以是css顏色，漸變，或圖案。fillstyle 預設設定是#000000（黑色）。
//這裡設定矩形顏色為#ff0000
ctx.fillstyle=
"#ff0000"
;// fillrect(x,y,width,height) 方法定義了矩形當前的填充方式
//x和y為該矩形的座標,橫為x，縱為y，從左上角開始計算。
ctx.
fillrect(0
,0,150,75
);<
/script>

這種方法需要引入jquery

引入方法

//get(m),有多個canvas，則取第m+1個

var ct=$(
"canvas").
get(0)
.getcontext
("2d"
);

//直線開始的地方

ctx.
moveto(0
,0);
//直線結束的地方
ctx.
lineto
(200
,100);
//開始畫線
ctx.
stroke()
;

//保證不會接著上次繼續畫

ctx.
beginpath()
;//分別設定圓的圓心座標(x,y)，半徑，開始和結束的圓心角位置
ctx.
arc(95,
50,40,
3,2*math.pi)
;//每乙個圖形都需要乙個該語句
ctx.
stroke()
;

//設定文字大小和字型

ctx.font=
"30px arial"
;//設定文字內容和位置
//實心字
ctx.
filltext
("你好",10
,50);
ctx.font=
"80px arial"
;//空心字
//該設定文字內容的語句會尋找離他最近的設定字型的語句作為文字的字型
ctx.
stroketext
("你好"
,110,50
);

//建立漸變

//設定漸變開始的(x,y),結束的(x,y)
var grd=ctx.
createlineargradient(0
,50,0
,100);
//設定漸變過程中要經歷的顏色
grd.
addcolorstop(0
,"red");
grd.
addcolorstop
(0.5
,"green");
grd.
addcolorstop(1
,"white");
//填充漸變
ctx.fillstyle=grd;
//設定漸變的位置和大小
ctx.
fillrect(0
,0,200
,100
);

學習canvas畫布

我們可以用畫布 canvas 繪製各種圖形，下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...

canvas學習筆記 2d畫布基礎

canvas 元素創造了乙個固定大小的畫布，其上的渲染上下文canvasrendercontext2d，可以用來繪製和處理要展示的內容。若要在canvas上繪圖，首先得獲取canvasrendercontext2d2d渲染上下文。此處指2d的，不談webgl const canvas documen...

HTML5的學習之canvas畫布 一

前面幾篇部落格我們一直在講如何使用canvas繪製一下，但是沒有講過canvas如何使用，都有哪些屬性，方法等。今天我們就來講一講canvas的有關屬性和方法。html my canvas canvas js 畫布預設 寬300px 高150px 獲取元素 var ocanvas document....