一、畫布的使用

1、首先創(chuàng)建一個(gè)畫布（canvas）

<canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>

2、使用JavaScript來繪制圖像

<script>

Var c=document.getElementByID(“myCanvas”)//得到畫布

Var ctx=c.getContext(“2d”);//得到畫筆

Cxt.fillStyle=”#FF0000”;//填充顏色

Cxt.fillRect(0,0,150,75);//規(guī)定頂點(diǎn)

</script>

3、Canvas -?路徑

• moveTo(x,y) 定義線條開始坐標(biāo)
• lineTo(x,y) 定義線條結(jié)束坐標(biāo)

二、畫圖舉例

1、畫直線：

定義開始坐標(biāo)(0,0), 和結(jié)束坐標(biāo) (200,100). 然后使用 stroke() 方法來繪制線條:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

2、畫圓

使用 arc() 方法 繪制一個(gè)圓:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

3、畫文本

使用 canvas 繪制文本，重要的屬性和方法如下：

• font - 定義字體
• fillText(text,x,y) - 在 canvas 上繪制實(shí)心的文本
• strokeText(text,x,y) - 在 canvas 上繪制空心的文本

（1）、使用 fillText()，使用 "Arial" 字體在畫布上繪制一個(gè)高 30px 的文字（實(shí)心）：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

（2）、使用 strokeText()，使用 "Arial" 字體在畫布上繪制一個(gè)高 30px 的文字（空心）：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

4、漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設(shè)置Canvas漸變：

• createLinearGradient(x,y,x1,y1)
  - 創(chuàng)建線條漸變
• createRadialGradient(x,y,r,x1,y1,r1)
  - 創(chuàng)建一個(gè)徑向/圓漸變

當(dāng)我們使用漸變對(duì)象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0至1.

使用漸變，設(shè)置fillStyle或strokeStyle的值為 漸變，然后繪制形狀，如矩形，文本，或一條線

（1）、使用
createLinearGradient()，創(chuàng)建一個(gè)線性漸變。使用漸變填充矩形:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);//規(guī)定漸變的起始坐標(biāo)
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

（2）、使用
createRadialGradient()，創(chuàng)建一個(gè)徑向/圓漸變。使用漸變填充矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

5、Canvas -?圖像

把一幅圖像放置到畫布上, 使用以下方法:

• drawImage(image,x,y)

var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var
img=document.getElementById("scream");//得到id為scream的image,并定義為變量img
ctx.drawImage(img,10,10);//以畫布坐標(biāo)（10，10）為開始，將圖片放置畫布上。

文章來源地址http://www.zghlxwxcb.cn/news/detail-461442.html

到了這里，關(guān)于關(guān)于HTML5畫布canvas的功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！