js輪播圖無縫滑動
<canvas> 標籤定義圖形,比如圖表和其他影象,您必須使用指令碼來繪製圖形。
在畫布上(Canvas)畫一個紅色矩形,漸變矩形,彩色矩形,和一些彩色的文字。
什麼是 canvas?
HTML5 <canvas> 元素用於圖形的繪製,通過指令碼 (通常是JavaScript)來完成.
<canvas> 標籤只是圖形容器,您必須使用指令碼來繪製圖形。
你可以通過多種方法使用 canvas 繪製路徑,盒、圓、字元以及新增影象。
建立一個畫布(Canvas)
一個畫布在網頁中是一個矩形框,通過 <canvas> 元素來繪製.
例項
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>使用 JavaScript 來繪製圖像
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成:
例項
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);例項解析:
首先,找到 <canvas> 元素:
var c=document.getElementById("myCanvas");然後,建立 context 物件:
var ctx=c.getContext("2d");getContext("2d") 物件是內建的 HTML5 物件,擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。
下面的兩行程式碼繪製一個紅色的矩形:
ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);
設定fillStyle屬性可以是CSS顏色,漸變,或圖案。fillStyle 預設設定是#000000(黑色)。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
在canvas中繪製路徑
moveTo(x,y) 定義線條開始座標
lineTo(x,y) 定義線條結束座標
定義開始座標(0,0), 和結束座標 (200,100)。然後使用 stroke() 方法來繪製線條:
JavaScript:var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
在canvas中繪製圓形
arc(x,y,r,start,stop)
arc方法是2D畫布的一個繪製圓狀態的一個方法,arc有六個引數:arc(x, y, r, sAngle, eAngle, counterclockwise);六個引數對應的意思:
x,y表示圓心座標
r 表示圓的半徑
sAngle : 表示開始繪製的角度
eAngle : 表示結束繪製的角度
counterclockwise : 表示順時針繪製還是逆時針,false = 順時針,true = 逆時針,預設值是false
例項:
ctx.arc(150,120,100,1*Math.PI,0.5*Math.PI);
在canvas中繪製文字
使用 canvas 繪製文字,重要的屬性和方法如下:
- font - 定義字型
- fillText(text,x,y) - 在 canvas 上繪製實心的文字
- strokeText(text,x,y) - 在 canvas 上繪製空心的文字
使用 fillText():
例項
使用 "Arial" 字型在畫布上繪製一個高 30px 的文字(實心):
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);使用 strokeText():
例項
使用 "Arial" 字型在畫布上繪製一個高 30px 的文字(空心):
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);