溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“怎么用HTML5的Canvas API繪制圖形”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
1. Canvas元素
以下html代碼定義了一個canvas元素。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html>
<html>
<head>
<title>Canvas快速入門</title>
<meta charset="utf-8"/>
</head>
<body>
<div>
<canvas id="mainCanvas" width="640" height="480"></canvas>
</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 坐標系統(tǒng)
Canvas 2D渲染上下文采用平面笛卡爾坐標系統(tǒng)，左上角為原點(0,0)，坐標系統(tǒng)的1個單位相當(dāng)于屏幕的1個像素。具體如下圖：
2.2 繪制基本圖形
2.2.1 矩形
JavaScript Code復(fù)制內(nèi)容到剪貼板
//繪制一個填充矩形
context.fillRect(x, y, width, height)
//繪制一個邊框矩形
context.strokeRect(x, y, width, height)
//清除一個矩形區(qū)域
context.clearRect(x, y, width, height)
2.2.2 線條
繪制線條與繪制圖形有一些區(qū)別，線條實際上稱為路徑。要繪制一條簡單的路徑，首先必須調(diào)用beginPath方法，接著調(diào)用moveTo設(shè)置路徑的起點坐標，然后調(diào)用lineTo設(shè)置線段終點坐標（可多次設(shè)置），再調(diào)用closePath完成路徑繪制。最后調(diào)用stroke繪制輪廓（或調(diào)用fill填充路徑）。以下為例子：
JavaScript Code復(fù)制內(nèi)容到剪貼板
//示例
context.beginPath(); //開始路徑
context.moveTo(40, 40); //移動到點(40,40)
context.lineTo(300, 40); //畫線到點(300,30)
context.lineTo(40, 300); //畫線到點(40,300)
context.closePath(); //結(jié)束路徑
context.stroke(); //繪制輪廓
//或者填充用context.fill();
2.2.3 圓形
Canvas實際上并沒有專門繪制圓形的方法，可以通過畫圓弧來模擬圓形。由于圓弧是一種路徑，所以畫圓弧的API應(yīng)該包含在beginPath和closePath之間。
2.3 樣式
2.3.1 修改線條顏色
JavaScript Code復(fù)制內(nèi)容到剪貼板
var color;
//指定RGB值
color = "rgb(255, 0, 0)";
//指定RGBA值（最后一個參數(shù)為alpha值，取值0.0~1.0）
color = "rgba(255, 0, 0, 1)";
//指定16進制碼
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 黑體";
//在點(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. 高級功能
3.1 使Canvas填滿瀏覽器窗口
最簡單的方式是將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中，繪圖狀圖指的是描述某一時刻2D渲染上下文外觀的整套屬性，包括：變換矩陣、裁剪區(qū)域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。
當(dāng)需要改變畫布全局狀態(tài)時，一般先將當(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渲染上下文的原點從一個位置移動到另一個位置。注意，這里移動的是坐標原點即全局繪圖位置，API如下：
JavaScript Code復(fù)制內(nèi)容到剪貼板
//將坐標原點移動到(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)容到剪貼板
//將畫布繞著原點旋轉(zhuǎn)radius弧度
context.rotate(radius)
“怎么用HTML5的Canvas API繪制圖形”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
