一、基本用法

• canvas 標簽：可用于在網(wǎng)頁上繪制圖形（使用 JavaScript 在網(wǎng)頁上繪制圖像）
• 畫布是一個矩形區(qū)域，通過控制其每一像素繪制路徑、矩形、圓形、字符以及添加圖像。
• 創(chuàng)建一個canvas：width 和 height 是必備屬性，id 是為了在 js 中獲取改元素。

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

• 在 js 中繪制 canvas

<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
// 繪制矩形（前2個參數(shù)為在canvas里面的矩形左上角起點坐標，第3個參數(shù)是寬，第4個參數(shù)是高）
cxt.fillRect(0,0,150,75);
// 填充顏色
cxt.fillStyle="#FF0000";
</script>

二、用法詳見

2.0、方法屬性

• context 對象屬性

• context 對象方法

2.1、繪制線條

• 線條方法

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
// 線條起點坐標
cxt.moveTo(10,10);
// 折點坐標
cxt.lineTo(150,50);
// 折點坐標
cxt.lineTo(10,50);
// 繪制當前或已經(jīng)存在的路徑的方法
cxt.stroke();
</script>

• 專有屬性

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.lineCap = "round";
ctx.stroke();

2.2、繪制矩形

• fillRect() 方法：向路徑添加一個填充的矩形 context.fillRect(x, y, width, height)
• strokeRect() 方法：向路徑添加一個無填充矩形 context.fillRect(x, y, width, height)
• rect() 方法：向路徑添加一個矩形 context.rect(x, y, width, height)

1. strokeRect(30, 30, 50, 50) 
等價于：
	ctx.rect(30, 30, 50, 50);
	ctx.stroke();
2. fillRect(30, 30, 50, 50) 
等價于：
	ctx.rect(30, 30, 50, 50);
	ctx.fill();

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 紅色矩形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow"	// 在 strokeRect 中不生效
ctx.strokeRect(5, 5, 290, 140);

// 綠色矩形
ctx.beginPath();
ctx.lineWidth = "4";		// 在 fillRect 中不生效
ctx.strokeStyle = "green";	// 在 fillRect 中不生效
ctx.fillStyle = "yellow"
ctx.fillRect(30, 30, 50, 50);

2.3、繪制圓形

• arc() 方法：向路徑添加一個圓形 context.arc(x,y,r,start,end)

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
// 填充顏色
cxt.fillStyle="#FF0000";
// 創(chuàng)建一個新的路徑
cxt.beginPath();
// 繪制圓弧路徑的方法（圓心的x軸坐標，圓心的y軸坐標，圓弧的半徑，圓弧的起始點，圓弧的終點，true逆時針繪制圓弧false順時針繪制）
cxt.arc(70,18,15,0,Math.PI*2,true);
// 返回到當前路徑起始點的方法
cxt.closePath();
// 填充當前或已存在的路徑的方法
cxt.fill();
</script>

2.4、繪制文本

• fillText(text,x,y)：在畫布上繪制“填充的”文本

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

• strokeText(text,x,y)：在畫布上繪制文本（無填充）

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

• 專有屬性：

• font 屬性：使用的語法與 CSS font 屬性相同。

• textAlign 屬性
  文章來源地址http://www.zghlxwxcb.cn/news/detail-799726.html

• textBaseline 屬性
  

2.5、填充圖像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通過 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 創(chuàng)建 context 對象
var cxt = c.getContext("2d");
var img = document.getElementById("scream");
// 放置圖片 （圖片，image的左上角在目標畫布上X軸坐標，image的左上角在目標畫布上Y軸坐標）
ctx.drawImage(img, 10, 10)
</script>

到了這里，關于【HTML5】 canvas 繪制圖形的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！