HTML5三維、圖形與特效(七)

canvas 元素

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出袁州免費(fèi)做網(wǎng)站回饋大家。

用于在網(wǎng)頁(yè)上繪制圖形

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。

畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

創(chuàng)建 Canvas 元素

向 HTML5 頁(yè)面添加 canvas 元素。

規(guī)定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通過(guò) JavaScript 來(lái)繪制

canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 來(lái)尋找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，創(chuàng)建 context 對(duì)象：

var cxt=c.getContext("2d");

getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪制一個(gè)紅色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。

理解坐標(biāo)

上面的 fillRect 方法擁有參數(shù) (0,0,150,75)。

意思是：在畫(huà)布上繪制 150x75 的矩形，從左上角開(kāi)始 (0,0)。

如下圖所示，畫(huà)布的 X 和 Y 坐標(biāo)用于在畫(huà)布上對(duì)繪畫(huà)進(jìn)行定位。

實(shí)例1

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>

<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}

function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>

<body >

<p>把鼠標(biāo)懸停在下面的矩形上可以看到坐標(biāo)：</p>

<div id="coordiv" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>


</body>
</html>
效果

HTML5 三維、圖形與特效(七)

實(shí)例 - 線條

通過(guò)指定從何處開(kāi)始，在何處結(jié)束，來(lái)繪制一條線：

HTML5 三維、圖形與特效(七)

JavaScript 代碼：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the canvas element.
</canvas>


實(shí)例 - 圓形

通過(guò)規(guī)定尺寸、顏色和位置，來(lái)繪制一個(gè)圓：

HTML5 三維、圖形與特效(七)

JavaScript 代碼：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the canvas element.
</canvas>

實(shí)例 - 漸變

使用您指定的顏色來(lái)繪制漸變背景：

HTML5 三維、圖形與特效(七)

JavaScript 代碼：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the canvas element.
</canvas>

實(shí)例 - 圖像

把一幅圖像放置到畫(huà)布上：

HTML5 三維、圖形與特效(七)

JavaScript 代碼：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the canvas element.
</canvas>

網(wǎng)站標(biāo)題：HTML5三維、圖形與特效(七)
標(biāo)題來(lái)源：http://bm7419.com/article28/jddhjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、標(biāo)簽優(yōu)化、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)