HTML5 Canvas標簽基本使用方法講解！

今天在經(jīng)歷這段是件大家的督促下，小編在日以月計的工作中抽身出來和打大家分享個有關于：“HTML5 Canvas標簽基本使用方法講解！”這個方面的內容！

HTML 5 <canvas> 標簽定義和用法

<canvas> 標簽定義圖形，比如圖表和其他圖像。

<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。

實例

如何通過 canvas 元素來顯示一個紅色的矩形：

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

< canvas>定義圖形 基于狀態(tài)進行繪制的

大多數(shù) Canvas 繪圖 API 都沒有定義在 < canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環(huán)境”對象上：

canvas.width  canvas.height  //指定canvas的寬高
canvas.getContext("2d");   //返回繪制的環(huán)境
context.moveTo(10,10) //從（10，10）開始畫
context.lineTo(100,100) //從（10，10）開始畫，畫到（100，100）
context.stroke()   //開始繪制（線條）
context.lineWidth=3   //設置線條的寬度
context.strokeStyle="#f00"   設置線條的顏色  stroke筆畫的意思
context.fillStyle="rgb(255,0,0)"；context.fill()  //著色，，填充的顏色（顏色塊）
context.beginPath();   //定義一個新的路徑
context.closePath();   //用在路徑結束，
  如果繪制的路徑不是封閉的則會自動封閉起來，不寫closrPath則不會封閉
//從坐標（20，30）開始，畫一個64*36的矩形
  context.fillRect(20,30,64,36);    //rect矩形
//繪制弧和圓
context.arc(
 centetx,centery,radius,  //圓心坐標及半徑
 startingAngle,enddingAngle,  //從哪個弧度值開始，結束于哪個弧度值
 anticlockwise=false   //可選，，表示以順時針開始繪制還是逆時針。
  默認:順時針。。true以逆時針繪制
)
//調用arc函數(shù)
//以(300,300)為圓心，200為半徑畫弧,從0畫到1.5個PI
context.arc(300,300,200,0,1.5*Math.PI)
//全局變量
WINDOW_WIDTH=1024;    WINDOW_HEIGHT=768;
//調用全局變量
canvas.width=WINDOW_WIDTH;
//render()函數(shù)  render(context);
renderDigit(0,0,parseInt(hours/10),ctx)

總結

在以上簡簡單單中我們所述的都是小編給大家介紹的HTML5 Canvas標簽基本使用方法講解！的相關內容，那么小編也希望對大家有所幫助，其他的學習資料我們都可以在W3Cschool網(wǎng)站學習到！