Canvas繪圖- JavaScript 來(lái)繪制圖像
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">?</canvas>
使用 JavaScript 來(lái)繪制圖像
canvas 元素本身是沒(méi)有繪圖能力的溪掀。所有的繪制工作必須在 JavaScript 內(nèi)部完成:
strokeRect()
定義和用法:strokeRect() 方法繪制矩形(不填色)。筆觸的默認(rèn)顏色是黑色旋讹。
JavaScript語(yǔ)法: context.strokeRect(x,y,width,height);
fillRect()
定義和用法:fillRect() 方法繪制“已填色”的矩形。默認(rèn)的填充顏色是黑色。
格式和strokeRect一樣。
clearRect()
定義和用法:clearRect() 方法清空給定矩形內(nèi)的指定像素熄守。
JavaScript 語(yǔ)法:context.clearRect(x,y,width,height);
fillStyle 屬性
定義和用法:fillStyle 屬性設(shè)置或返回用于填充繪畫(huà)的顏色、漸變或模式耗跛。
fillStyle 屬性設(shè)置或返回用于填充繪畫(huà)的顏色裕照、漸變或模式。
JavaScript 語(yǔ)法: context.fillStyle=color|gradient|pattern;
#######strokeStyle 屬性
定義和用法:strokeStyle 屬性設(shè)置或返回用于筆觸的顏色课兄、漸變或模式牍氛。
Canvas 路徑
moveTo(x,y) 定義線(xiàn)條開(kāi)始坐標(biāo)
lineTo(x,y) 定義線(xiàn)條結(jié)束坐標(biāo)
beginPath(): 開(kāi)始一條路徑
closePath():創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑晨继。
圓-->arc()
arc() 方法創(chuàng)建弧/曲線(xiàn)(用于創(chuàng)建圓或部分圓)烟阐。
JavaScript 語(yǔ)法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);