HTML之Canvas標籤及對應屬性、API詳解

阿新 • • 發佈：2019-01-15

聽說HTMl很火，自己也是借了幾本書，想深刻了解一下，翻書一看，又驚又喜，這不是在大學還學過半年呢嘛，畢業設計就是和這個網頁設計相關的，正好，前邊幾章大致翻閱一下複習，著重看了後邊的章節，今天看了一個canvas標籤，感覺挺有用的，其實知識都是一樣的，我現在在做iOS開發，也經常會用到劃線方法，DrawInRect，CGContext等，和這個Canvas是非常相似的，自己也是寫了點demo，程式碼片段和大家分享一下：

標籤：

知識說明：

HTML5新增的canvas標籤，通過建立畫布，在畫布上建立任何想要的形狀，下面將canvas的API以及屬性做一個整理，並且附上時鐘的示例，便於後期複習學習！Fighting！

一、標籤原型

您的瀏覽器版本過低，不支援HTML5新增的canvas標籤。

</canvas>

使用js獲取該畫布，並指定物件

Var canvasID = document.getElementById(“myCanvas”);

Var canvas = canvasID.getContext(“2d”);

</script>

二、canvas標籤常見屬性

屬性

值

功能描述

width

pixels

設定canvas的寬度

height

pixels

設定canvas的高度

三、canvas標籤的API整合

屬性	值	功能描述
save()	Canvas.save();	儲存當前畫布環境狀態
Restore()	Canvas.restore();	返回之前儲存的畫布的路徑狀態，與save()成對用
getContext()	Canvas.getContext();	返回一個物件，指出訪問繪圖功能必要的API
toDataURL()	Canvas.toDataURL();	返回canvas影象的url

四、canvas標籤API的主要屬性整合

a、畫圓

屬性	值	功能描述
fillStyle	Canvas.fillStyle=”#f00”	設定或返回用於填充繪畫的顏色、漸變或模式
strokeStyle	Canvas.strokeStyle=”#f0f”;	設定或返回用於筆觸的顏色、漸變或模式
beginPath()	Canvas.beginPath();	開啟畫路徑
closePath()	Canvas.closePath();	關閉畫路徑
Arc()	Canvas.arc(0,0,10,0,360,false); 引數：原點X、原點Y、原點起始弧度，原點結束弧度、順時針/逆時針	畫圓
Fill()	Canvas.fill()	填充
Stroke()	Canvas.stroke()	畫邊框

畫圓程式碼片段：

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

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

//畫圓方法

function drawArc(id)

{

canvas.beginPath();

canvas.lineWidth = 5;

canvas.fillStyle = "#00f";

canvas.strokeStyle = "#0f0";

canvas.arc(100, 100, 50, 0, 360, false);

canvas.fill();

canvas.stroke();

canvas.closePath();

}

drawArc("myCanvas");

</script>

b、畫線

屬性	值	功能描述
Translate	Canvas.translate(200,200)	重置座標原點
lineWidth	Canvas. lineWidth=10;	設定線的寬度
moveTo ()	Canvas. moveTo (0,0);	開始畫線的初始位置
lineTo ()	Canvas. lineTo (100,0);	畫線結束點位置

畫線程式碼片段：

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

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

function drawLine(id)

{

canvas.save();

canvas.translate(150,100);

canvas.lineWidth= 10;

canvas.strokeStyle = "#999";

canvas.beginPath();

canvas.moveTo(0,0);

canvas.lineTo(100,0);

canvas.closePath();

canvas.stroke();

canvas.restore();

}

drawLine("myCanvas");

</script>

c、畫多邊形

畫三角形程式碼片段：

//畫多邊形，此處以三角形為例

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

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

function drawSanjiao(id)

{

canvas.save();

canvas.translate(250,40);

canvas.lineWidth = 3;

canvas.strokeStyle = "#0f0";

canvas.beginPath();

canvas.moveTo(0,0);

canvas.lineTo(0,120);

canvas.lineTo(100,60);

canvas.lineTo(0,0);

canvas.stroke();

canvas.closePath();

canvas.restore();

}

drawSanjiao("myCanvas");

</script>

d、畫文字

畫文字程式碼片段：

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

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

function drawText(id)

{

canvas.save();

canvas.translate(100,300);

canvas.strokeStyle="#09";

canvas.fillStyle = "#879";

canvas.font = "normal 90px 微軟雅黑";

canvas.strokeText("hello html5", 0, 0);

canvas.fillText("hello html5", 0, 0);

canvas.restore();

}

drawText("myCanvas");

</script>

以上a、b、c、d整合效果如下圖：

技術分享

五、使用canvas標籤繪製時鐘

程式碼片段：

您的瀏覽器版本太低，不支援顯示時鐘的canvas標籤

</canvas>

var clockID = document.getElementById("clockCanvas");

var clock = clockID.getContext("2d");

/*步驟：畫鐘錶整體思路步驟分析

1、使用canvas建立畫布，並建立一個2d物件

2、使用function方法做計算

3、例項化Date()物件，通過該物件獲取系統當前的時、分、秒

4、通過計算將24小時制轉化為12小時制

5、畫表盤

6、畫刻度盤

7、畫指標

8、使用setInterval(fun, time);設定動態

//畫時鐘的方法

function drawClock(id)

{

//每次清空畫布

clock.clearRect(0,0,1000,1000);

//獲取系統當前時間（時、分、秒）

var now = new Date(); //例項化一個當前時間的物件，通過該物件獲取系統當前時間

var sec = now.getSeconds(); //秒

var mins = now.getMinutes(); //分

var hours = now.getHours(); //時

//繪製文字，顯示系統當前時間：

clock.save();

clock.translate(0,500);

clock.fillStyle = "#ff0";

clock.strokeStyle = "#eee";

clock.font = "bold 50px 微軟雅黑";

clock.strokeText("系統當前時間為："+hours+"時"+mins+"分"+sec+"秒", 100, 100);

clock.fillText("系統當前時間為："+hours+"時"+mins+"分"+sec+"秒", 100, 100);

clock.restore();

//計算：滿60分加一小時

hours = hours + mins/60;

//計算：將24小時制轉化為12小時制

hours = hours>12?hours-12:hours;

//畫表盤

clock.beginPath();

clock.lineWidth = 10;

clock.strokeStyle = "#ff00ff";

clock.arc(300, 300, 200, 0, 360, false);

clock.stroke();

clock.closePath();

//畫刻度盤

//時刻度

for(var i = 0; i < 12; i++)

{

clock.save();

//將起始點定位到圓心

clock.translate(300,300);

//設定刻度的樣式

clock.lineWidth = 7;

clock.strokeStyle = "#999999";

//設定旋轉角度

clock.rotate(i*30*Math.PI/180);

clock.beginPath();

clock.moveTo(0, -170);

clock.lineTo(0, -190);

/*clock.font = "normal 20px 宋體";

clock.textAlign = "left";

clock.textBaseLine = "top";

clock.strokeText(i, i*(-50)*Math.PI/180, -150);

clock.closePath();*/

//畫刻度線

clock.stroke();

clock.restore();

}

//分刻度

for(var j = 0; j<60; j++)

{

clock.save();

//設定起始點座標

clock.translate(300,300);

clock.lineWidth = 5;

clock.strokeStyle = "#999999";

//設定旋轉角度

clock.rotate(j*6*Math.PI/180);

clock.beginPath();

clock.moveTo(0, -180);

clock.lineTo(0, -190);

clock.closePath();

clock.stroke();

clock.restore();

}

//時針

clock.save();

clock.translate(300,300);

clock.lineWidth = 7;

clock.strokeStyle = "#000000";

//設定小時的旋轉角度，沒轉一次走30°

clock.rotate(hours*30*Math.PI/180);

clock.beginPath();

clock.moveTo(0,15);

clock.lineTo(0,-120);

clock.stroke();

clock.closePath();

clock.restore();

//分針

clock.save();

clock.translate(300, 300);

clock.rotate(mins*6*Math.PI/180);

clock.lineWidth = 5;

clock.strokeStyle = "#000";

clock.beginPath();

clock.moveTo(0,20);

clock.lineTo(0,-160);

clock.stroke();

clock.closePath();

clock.restore();

//秒針

clock.save();

clock.translate(300,300);

clock.rotate(sec*6*Math.PI/180);

clock.lineWidth = 3;

clock.strokeStyle = "#f00";

clock.beginPath();

clock.moveTo(0, 25);

clock.lineTo(0,-165);

clock.stroke();

clock.closePath();

//秒針圓心處一個小圈

clock.fillStyle = "#999";

clock.strokeStyle = "#f00";

clock.beginPath();

clock.arc(0,0,6,0,360,false);

clock.fill();

clock.stroke();

clock.closePath();

//秒針頂部一個小圈

clock.beginPath();

clock.arc(0,-140,6,0,360,false);

clock.fill();

clock.stroke();

clock.closePath();

clock.restore();

}

drawClock();

setInterval(drawClock, 1000); //是錶針根據系統當前時間轉動起來

</script>

繪製結果如下圖：

技術分享

Hope To Help You !

技術交流群：141624834 進群請說你看的那篇部落格，我們一起探討成長

HTML之Canvas標籤及對應屬性、API詳解

HTML之Canvas標籤及對應屬性、API詳解

2 類、實例、屬性、方法詳解

Mybatis之Mapper介面及Example例項函式使用詳解

HTML中select標籤單選多選用法詳解

Redis從入門到熟練使用之測試哨兵及主從高可用（詳解，第四篇，共五篇）

微信小程式之邏輯層(JS)路由+模組化+API詳解

C# 正則表示式html匹配input標籤及匹配input的value及獲取aspnet頁面VIEWSTATE、EVENTVALIDATION的UI狀態儲存值

Android自學筆記之ProgressBar進度條的屬性、常用方法及使用

AngularJS語法基礎及數據綁定——詳解各種數據綁定指令、屬性應用

【Unity Shader】（八） ------ 高階紋理之立方體紋理及光線反射、折射的實現

【Unity Shader】（八） ------ 高級紋理之立方體紋理及光線反射、折射的實現

html中input標籤的tabindex屬性

大資料系列之——hive（七、hive詳解及應用）

HTML中img標籤的src屬性絕對路徑問題解決辦法，完全解決！

html 之input標籤height設定問題

Maven之——外掛目標及繫結、命令列呼叫外掛、目標字首(外掛字首解析策略)、外掛解析執行機制

ArcGIS API For Javascript之呼叫動態地圖服務+屬性、空間查詢

HTML5繪圖之Canvas標籤繪製座標軸

關於html頁面img標籤中src屬性的理解

html中select標籤的常用屬性

HTML之Canvas標籤及對應屬性、API詳解

相關推薦