HTML5 <canvas> 元素用于圖形的繪制届慈，通過(guò)腳本 (通常是JavaScript)來(lái)完成族壳。<canvas> 標(biāo)簽只是圖形容器憔辫，必須使用腳本來(lái)繪制圖形》戮＃可以通過(guò)多種方法使用Canva繪制路徑,盒贰您、圓、字符以及添加圖像拢操。
創(chuàng)建一個(gè)畫布（Canvas）
默認(rèn)情況下 <canvas> 元素沒(méi)有邊框和內(nèi)容枉圃。常需要指定一個(gè)id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小。
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc"></canvas>
使用 JavaScript 來(lái)繪制圖像
canvas 元素本身是沒(méi)有繪圖能力的庐冯。所有的繪制工作必須在 JavaScript 內(nèi)部完成孽亲。
1、找到 <canvas> 元素
var c=document.getElementById("myCanvas");
2展父、創(chuàng)建 context 對(duì)象：
var ctx=c.getContext("2d");
getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象返劲，擁有多種繪制路徑、矩形栖茉、圓形篮绿、字符以及添加圖像的方法。
3吕漂、繪制一個(gè)紅色的矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,100,90);
設(shè)置fillStyle屬性可以是CSS顏色亲配，漸變，或圖案惶凝。fillStyle 默認(rèn)設(shè)置是#000000（黑色）吼虎。
fillRect(x,y,width,height) 方法定義了矩形當(dāng)前的填充方式。
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,100,90);
</script>
Canvas - 坐標(biāo)
canvas 是一個(gè)二維網(wǎng)格苍鲜。canvas 的左上角坐標(biāo)為 (0,0)思灰。畫布的 X 和 Y 坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位。
Canvas - 路徑
1混滔、在Canvas上畫線
moveTo(x,y) 定義線條開(kāi)始坐標(biāo)
lineTo(x,y) 定義線條結(jié)束坐標(biāo)
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #ccc"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(80,100);
ctx.stroke();
</script>
2洒疚、在canvas中繪制圓形
使用arc(x,y,r,start,stop)
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(80,90,30,0,2*Math.PI);
ctx.stroke();
</script>
Canvas - 文本
使用 canvas 繪制文本歹颓，重要的屬性和方法如下：
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Just do it!",30,30);
ctx.strokeText("Just do it!",60,60);
</script>
Canvas - 漸變
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來(lái)設(shè)置Canvas漸變：
createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變油湖。
createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個(gè)徑向/圓漸變巍扛。
1、當(dāng)使用漸變對(duì)象乏德，必須使用兩種或兩種以上的停止顏色撤奸。
2、addColorStop()方法指定顏色停止鹅经，參數(shù)使用坐標(biāo)來(lái)描述寂呛，可以是0至1.
3、使用漸變瘾晃，設(shè)置fillStyle或strokeStyle的值為漸變贷痪，然后繪制形狀，如矩形蹦误，文本劫拢，或一條線。
4强胰、使用 createLinearGradient():
創(chuàng)建一個(gè)線性漸變舱沧。使用漸變填充矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//創(chuàng)建漸變
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"black");
//填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
創(chuàng)建一個(gè)徑向/圓漸變。使用漸變填充矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"black");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
Canvas - 圖像
把一幅圖像放置到畫布上, 使用以下方法:
drawImage(image,x,y)
方法一：
<canvas id="myCanvas" width="250" height="300" style="border: 1px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload=function(){
ctx.drawImage(img,10,10);
}
</script>
方法二：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image()
img.src="#"
ctx.drawImage(img,0,0);
</script>
