怎么調(diào)用HTML5的CanvasAPI繪制圖形

這篇文章主要講解了“怎么調(diào)用HTML5的Canvas API繪制圖形”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么調(diào)用HTML5的Canvas API繪制圖形”吧！

超過10余年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都做網(wǎng)站、網(wǎng)站制作，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，小程序開發(fā)，微信開發(fā)，成都app軟件開發(fā)公司，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！

1. Canvas元素

以下html代碼定義了一個(gè)canvas元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>

<html>

<head>

<title>Canvas快速入門</title>

</head>

<body>

<div>

</div>

</body>

</html>

通過以下Javascript語句訪問canvas元素：

JavaScript Code復(fù)制內(nèi)容到剪貼板

//DOM寫法

window.onload = function () {

var canvas = document.getElementById("mainCanvas");

var context = canvas.getContext("2d");

};

//jQuery寫法

$(document).ready(function () {

var canvas = $("#mainCanvas");

var context = canvas.get(0).getContext("2d");

});

//接下來就可以調(diào)用context的方法來調(diào)用繪圖API

2. 基礎(chǔ)API

2.1 坐標(biāo)系統(tǒng)

Canvas 2D渲染上下文采用平面笛卡爾坐標(biāo)系統(tǒng)，左上角為原點(diǎn)(0,0)，坐標(biāo)系統(tǒng)的1個(gè)單位相當(dāng)于屏幕的1個(gè)像素。具體如下圖：

2016617120045425.jpg (220×220)

2.2 繪制基本圖形

2.2.1 矩形

JavaScript Code復(fù)制內(nèi)容到剪貼板

//繪制一個(gè)填充矩形

context.fillRect(x, y, width, height)

//繪制一個(gè)邊框矩形

context.strokeRect(x, y, width, height)

//清除一個(gè)矩形區(qū)域

context.clearRect(x, y, width, height)

2.2.2 線條

繪制線條與繪制圖形有一些區(qū)別，線條實(shí)際上稱為路徑。要繪制一條簡(jiǎn)單的路徑，首先必須調(diào)用beginPath方法，接著調(diào)用moveTo設(shè)置路徑的起點(diǎn)坐標(biāo)，然后調(diào)用lineTo設(shè)置線段終點(diǎn)坐標(biāo)（可多次設(shè)置），再調(diào)用closePath完成路徑繪制。最后調(diào)用stroke繪制輪廓（或調(diào)用fill填充路徑）。以下為例子：

JavaScript Code復(fù)制內(nèi)容到剪貼板

//示例

context.beginPath(); //開始路徑

context.moveTo(40, 40); //移動(dòng)到點(diǎn)(40,40)

context.lineTo(300, 40); //畫線到點(diǎn)(300,30)

context.lineTo(40, 300); //畫線到點(diǎn)(40,300)

context.closePath(); //結(jié)束路徑

context.stroke(); //繪制輪廓

//或者填充用context.fill();

2.2.3 圓形

Canvas實(shí)際上并沒有專門繪制圓形的方法，可以通過畫圓弧來模擬圓形。由于圓弧是一種路徑，所以畫圓弧的API應(yīng)該包含在beginPath和closePath之間。

2.3 樣式

2.3.1 修改線條顏色

JavaScript Code復(fù)制內(nèi)容到剪貼板

var color;

//指定RGB值

color = "rgb(255, 0, 0)";

//指定RGBA值（最后一個(gè)參數(shù)為alpha值，取值0.0~1.0）

color = "rgba(255, 0, 0, 1)";

//指定16進(jìn)制碼

color = "#FF0000";

//用單詞指定

color = "red";

//設(shè)置填充顏色

context.fillStyle = color;

//設(shè)置邊框顏色

context.strokeStyle = color;

2.3.2 修改線寬

JavaScript Code復(fù)制內(nèi)容到剪貼板

//指定線寬值

var value= 3;

//設(shè)置邊框顏色

context.linewidth = value;

2.4 繪制文本

JavaScript Code復(fù)制內(nèi)容到剪貼板

//指定字體樣式

context.font = "italic 30px 黑體";

//在點(diǎn)(40,40)處畫文字

context.fillText("Hello world!", 40, 40);

2.5 繪制圖像

在繪制圖像之前，需要先定義圖像并加載。

CSS Code復(fù)制內(nèi)容到剪貼板

var img = new Image();

img.src = "myImage.png";

img.onload = function () {

//圖像加載完畢執(zhí)行

};

以下是drawImage API解釋：

JavaScript Code復(fù)制內(nèi)容到剪貼板

//在(x,y)出繪制圖像image

context.drawImage(image, x, y)

//在(x,y)出繪制width*height的圖像image

context.drawImage(image, x, y, width, height)

//在image的(sx,sy)處截取sWidth*sHeight的圖像，在(dx,dy)處繪制dWidth*dHeight的圖像

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

3. 高級(jí)功能

3.1 使Canvas填滿瀏覽器窗口

最簡(jiǎn)單的方式是將canvas元素的寬度和高度精確設(shè)置為瀏覽器窗口的寬度和高度，用CSS消去白色空隙。

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

width: 100%;

}

canvas {

display: block;

}

Javascript代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板

function resizeCanvas() {

//canvas由jQuery獲取

canvas.attr("width", $(window).get(0).innerWidth);

canvas.attr("height", $(window).get(0).innerHeight);

context.fillRect(0, 0, canvas.width(), canvas.height());

}

$(window).resize(resizeCanvas);

resizeCanvas();

3.2 繪圖狀態(tài)

在canvas中，繪圖狀圖指的是描述某一時(shí)刻2D渲染上下文外觀的整套屬性，包括：變換矩陣、裁剪區(qū)域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。

當(dāng)需要改變畫布全局狀態(tài)時(shí)，一般先將當(dāng)前狀態(tài)保存起來——調(diào)用save方法將狀態(tài)推入繪圖狀態(tài)棧），做完操作之后，再調(diào)用restore方法回復(fù)繪圖狀態(tài)。

JavaScript Code復(fù)制內(nèi)容到剪貼板

//示例

context.save();

context.globalAlpha = 0.5;

context.fillRect(0, 0, 200, 100);

context.restore();

3.3 變形

3.3.1 平移

將2D渲染上下文的原點(diǎn)從一個(gè)位置移動(dòng)到另一個(gè)位置。注意，這里移動(dòng)的是坐標(biāo)原點(diǎn)即全局繪圖位置，API如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

//將坐標(biāo)原點(diǎn)移動(dòng)到(x,y)

context.translate(x, y)

3.3.2 縮放

JavaScript Code復(fù)制內(nèi)容到剪貼板

//將全局橫縱尺寸縮放至x,y倍（即在原有數(shù)值乘上倍乘因子）

context.scale(x, y)

3.3.3 旋轉(zhuǎn)

JavaScript Code復(fù)制內(nèi)容到剪貼板

//將畫布繞著原點(diǎn)旋轉(zhuǎn)radius弧度

context.rotate(radius)

感謝各位的閱讀，以上就是“怎么調(diào)用HTML5的Canvas API繪制圖形”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么調(diào)用HTML5的Canvas API繪制圖形這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

標(biāo)題名稱：怎么調(diào)用HTML5的CanvasAPI繪制圖形
標(biāo)題鏈接：http://bm7419.com/article48/ipdoep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站排名、商城網(wǎng)站、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣

聲明：本網(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í)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容