亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

<output id="1dmwf"></output>

當(dāng)前位置：站長(zhǎng)資訊網(wǎng) > 編程知識(shí) > 正文

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

2018-12-15 分類：編程知識(shí) 閱讀(1216) 評(píng)論(0)

一、canvas 簡(jiǎn)介

?<canvas> 是 HTML5 新增的，一個(gè)可以使用腳本(通常為 JavaScript) 在其中繪制圖像的 HTML 元素。它可以用來(lái)制作照片集或者制作簡(jiǎn)單(也不是那么簡(jiǎn)單)的動(dòng)畫，甚至可以進(jìn)行實(shí)時(shí)視頻處理和渲染。

?它最初由蘋果內(nèi)部使用自己 MacOS X WebKit 推出，供應(yīng)用程序使用像儀表盤的構(gòu)件和 Safari 瀏覽器使用。后來(lái)，有人通過(guò) Gecko 內(nèi)核的瀏覽器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超文本網(wǎng)絡(luò)應(yīng)用技術(shù)工作組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。

?Canvas 是由 HTML 代碼配合高度和寬度屬性而定義出的可繪制區(qū)域。JavaScript 代碼可以訪問(wèn)該區(qū)域，類似于其他通用的二維 API，通過(guò)一套完整的繪圖函數(shù)來(lái)動(dòng)態(tài)生成圖形。

? Mozilla 程序從 Gecko 1.8 (Firefox 1.5) 開始支持 <canvas>, Internet Explorer 從 IE9 開始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。

二、Canvas基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

2.1 `<canvas>` 元素

?<canvas> 看起來(lái)和 <img> 標(biāo)簽一樣，只是 <canvas> 只有兩個(gè)可選的屬性 width、heigth 屬性，而沒(méi)有 src、alt 屬性。

?如果不給 <canvas> 設(shè)置 widht、height 屬性時(shí)，則默認(rèn) width為300、height 為 150，單位都是 px。也可以使用 css 屬性來(lái)設(shè)置寬高，但是如寬高屬性和初始比例不一致，他會(huì)出現(xiàn)扭曲。所以，建議永遠(yuǎn)不要使用 css 屬性來(lái)設(shè)置 <canvas> 的寬高。

替換內(nèi)容

?由于某些較老的瀏覽器（尤其是 IE9 之前的 IE 瀏覽器）或者瀏覽器不支持 HTML 元素 <canvas>，在這些瀏覽器上你應(yīng)該總是能展示替代內(nèi)容。

?支持 <canvas> 的瀏覽器會(huì)只渲染 <canvas> 標(biāo)簽，而忽略其中的替代內(nèi)容。不支持 <canvas> 的瀏覽器則會(huì)直接渲染替代內(nèi)容。

用文本替換：

<canvas>      你的瀏覽器不支持 canvas，請(qǐng)升級(jí)你的瀏覽器。  </canvas>

用 <img> 替換：

<canvas>      <img src="./美女.jpg" alt="">   </canvas>

結(jié)束標(biāo)簽 </canvas> 不可省略。

與 <img> 元素不同，<canvas> 元素需要結(jié)束標(biāo)簽(</canvas>)。如果結(jié)束標(biāo)簽不存在，則文檔的其余部分會(huì)被認(rèn)為是替代內(nèi)容，將不會(huì)顯示出來(lái)。

2.2 渲染上下文(Thre Rending Context)

?<canvas> 會(huì)創(chuàng)建一個(gè)固定大小的畫布，會(huì)公開一個(gè)或多個(gè)渲染上下文(畫筆)，使用渲染上下文來(lái)繪制和處理要展示的內(nèi)容。

? 我們重點(diǎn)研究 2D 渲染上下文。其他的上下文我們暫不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 (“experimental-webgl”) 。

var canvas = document.getElementById('tutorial');  //獲得 2d 上下文對(duì)象  var ctx = canvas.getContext('2d');

2.3 檢測(cè)支持性

var canvas = document.getElementById('tutorial');    if (canvas.getContext){    var ctx = canvas.getContext('2d');    // drawing code here  } else {    // canvas-unsupported code here  }

2.4 代碼模板

實(shí)例

<canvas id="tutorial" width="300" height="300"></canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById(‘tutorial’); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); //開始代碼 } draw(); </script>

嘗試一下 ?

2.5 一個(gè)簡(jiǎn)單的例子

以下實(shí)例繪制兩個(gè)長(zhǎng)方形：

實(shí)例

<canvas id="tutorial" width="300" height="300"></canvas> <script type="text/javascript"> function draw(){ var canvas = document.getElementById(‘tutorial’); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; //繪制矩形 ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } draw(); </script>

嘗試一下 ?

三、繪制形狀

3.1 柵格 `(grid)` 和坐標(biāo)空間

?如下圖所示，canvas 元素默認(rèn)被網(wǎng)格所覆蓋。通常來(lái)說(shuō)網(wǎng)格中的一個(gè)單元相當(dāng)于 canvas 元素中的一像素。柵格的起點(diǎn)為左上角，坐標(biāo)為 (0,0) 。所有元素的位置都相對(duì)于原點(diǎn)來(lái)定位。所以圖中藍(lán)色方形左上角的坐標(biāo)為距離左邊（X 軸）x 像素，距離上邊（Y 軸）y 像素，坐標(biāo)為 (x,y)。

?后面我們會(huì)涉及到坐標(biāo)原點(diǎn)的平移、網(wǎng)格的旋轉(zhuǎn)以及縮放等。

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

3.2 繪制矩形

?<canvas> 只支持一種原生的圖形繪制：矩形。所有其他圖形都至少需要生成一種路徑 (path)。不過(guò)，我們擁有眾多路徑生成的方法讓復(fù)雜圖形的繪制成為了可能。

canvast 提供了三種方法繪制矩形：

1、fillRect(x, y, width, height)：繪制一個(gè)填充的矩形。
2、strokeRect(x, y, width, height)：繪制一個(gè)矩形的邊框。
3、clearRect(x, y, widh, height)：清除指定的矩形區(qū)域，然后這塊區(qū)域會(huì)變的完全透明。

說(shuō)明：這 3 個(gè)方法具有相同的參數(shù)。

x, y：指的是矩形的左上角的坐標(biāo)。(相對(duì)于canvas的坐標(biāo)原點(diǎn))
width, height：指的是繪制的矩形的寬和高。

function draw(){ var canvas = document.getElementById(‘tutorial‘); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.fillRect(10, 10, 100, 50); // 繪制矩形，填充的默認(rèn)顏色為黑色 ctx.strokeRect(10, 70, 100, 50); // 繪制矩形邊框 } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

ctx.clearRect(15, 15, 50, 25);

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

四、繪制路徑 (`path`)

圖形的基本元素是路徑。

路徑是通過(guò)不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。

一個(gè)路徑，甚至一個(gè)子路徑，都是閉合的。

使用路徑繪制圖形需要一些額外的步驟：

創(chuàng)建路徑起始點(diǎn)
調(diào)用繪制方法去繪制出路徑
把路徑封閉
一旦路徑生成，通過(guò)描邊或填充路徑區(qū)域來(lái)渲染圖形。

下面是需要用到的方法：

beginPath()

新建一條路徑，路徑一旦創(chuàng)建成功，圖形繪制命令被指向到路徑上生成路徑
moveTo(x, y)

把畫筆移動(dòng)到指定的坐標(biāo)(x, y)。相當(dāng)于設(shè)置路徑的起始點(diǎn)坐標(biāo)。
closePath()

閉合路徑之后，圖形繪制命令又重新指向到上下文中
stroke()

通過(guò)線條來(lái)繪制圖形輪廓
fill()

通過(guò)填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形

4.1 繪制線段

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); //新建一條path ctx.moveTo(50, 50); //把畫筆移動(dòng)到指定的坐標(biāo) ctx.lineTo(200, 50); //繪制一條從當(dāng)前位置到指定坐標(biāo)(200, 50)的直線. //閉合路徑。會(huì)拉一條從當(dāng)前點(diǎn)到path起始點(diǎn)的直線。如果當(dāng)前點(diǎn)與起始點(diǎn)重合，則什么都不做 ctx.closePath(); ctx.stroke(); //繪制路徑。 } draw();

4.2 繪制三角形邊框

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.closePath(); //雖然我們只繪制了兩條線段，但是closePath會(huì)closePath，仍然是一個(gè)3角形 ctx.stroke(); //描邊。stroke不會(huì)自動(dòng)closePath() } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

4.3 填充三角形

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.lineTo(200, 200); ctx.fill(); //填充閉合區(qū)域。如果path沒(méi)有閉合，則fill()會(huì)自動(dòng)閉合路徑。 } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

4.4 繪制圓弧

有兩個(gè)方法可以繪制圓?。?/p>

1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y)為圓心，以r為半徑，從 startAngle弧度開始到endAngle弧度結(jié)束。anticlosewise是布爾值，true表示逆時(shí)針，false表示順時(shí)針(默認(rèn)是順時(shí)針)。

注意：

這里的度數(shù)都是弧度。

0 弧度是指的 x 軸正方形。

radians=(Math.PI/180)*degrees   //角度轉(zhuǎn)換成弧度

2、arcTo(x1, y1, x2, y2, radius): 根據(jù)給定的控制點(diǎn)和半徑畫一段圓弧，最后再以直線連接兩個(gè)控制點(diǎn)。

圓弧案例 1

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(50, 50, 40, 0, Math.PI / 2, false); ctx.stroke(); } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

圓弧案例 2

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(50, 50, 40, 0, Math.PI / 2, false); ctx.stroke(); ctx.beginPath(); ctx.arc(150, 50, 40, 0, –Math.PI / 2, true); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.arc(50, 150, 40, –Math.PI / 2, Math.PI / 2, false); ctx.fill(); ctx.beginPath(); ctx.arc(150, 150, 40, 0, Math.PI, false); ctx.fill(); } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

圓弧案例 3

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); //參數(shù)1、2：控制點(diǎn)1坐標(biāo) 參數(shù)3、4：控制點(diǎn)2坐標(biāo) 參數(shù)4：圓弧半徑 ctx.arcTo(200, 50, 200, 200, 100); ctx.lineTo(200, 200) ctx.stroke(); ctx.beginPath(); ctx.rect(50, 50, 10, 10); ctx.rect(200, 50, 10, 10) ctx.rect(200, 200, 10, 10) ctx.fill() } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

arcTo 方法的說(shuō)明：

這個(gè)方法可以這樣理解。繪制的弧形是由兩條切線所決定。

第 1 條切線：起始點(diǎn)和控制點(diǎn)1決定的直線。

第 2 條切線：控制點(diǎn)1 和控制點(diǎn)2決定的直線。

?其實(shí)繪制的圓弧就是與這兩條直線相切的圓弧。

4.5 繪制貝塞爾曲線

4.5.1 什么是貝塞爾曲線

?

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。

一般的矢量圖形軟件通過(guò)它來(lái)精確畫出曲線，貝茲曲線由線段與節(jié)點(diǎn)組成，節(jié)點(diǎn)是可拖動(dòng)的支點(diǎn)，線段像可伸縮的皮筋，我們?cè)诶L圖工具上看到的鋼筆工具就是來(lái)做這種矢量曲線的。

貝塞爾曲線是計(jì)算機(jī)圖形學(xué)中相當(dāng)重要的參數(shù)曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具如 PhotoShop 等。在 Flash4 中還沒(méi)有完整的曲線工具，而在 Flash5 里面已經(jīng)提供出貝塞爾曲線工具。

貝塞爾曲線于 1962，由法國(guó)工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，他運(yùn)用貝塞爾曲線來(lái)為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線最初由Paul de Casteljau 于 1959 年運(yùn)用 de Casteljau 演算法開發(fā)，以穩(wěn)定數(shù)值的方法求出貝茲曲線。

一次貝塞爾曲線其實(shí)是一條直線

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

二次貝塞爾曲線

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

三次貝塞爾曲線

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

4.5.2 繪制貝塞爾曲線

繪制二次貝塞爾曲線:

quadraticCurveTo(cp1x, cp1y, x, y)

說(shuō)明：

? 參數(shù) 1 和 2：控制點(diǎn)坐標(biāo)
? 參數(shù) 3 和 4：結(jié)束點(diǎn)坐標(biāo)

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 200); //起始點(diǎn) var cp1x = 40, cp1y = 100; //控制點(diǎn) var x = 200, y = 200; // 結(jié)束點(diǎn) //繪制二次貝塞爾曲線 ctx.quadraticCurveTo(cp1x, cp1y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(10, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

繪制三次貝塞爾曲線:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

說(shuō)明：

? 參數(shù) 1 和 2：控制點(diǎn) 1 的坐標(biāo)
? 參數(shù) 3 和 4：控制點(diǎn) 2 的坐標(biāo)
? 參數(shù) 5 和 6：結(jié)束點(diǎn)的坐標(biāo)

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(40, 200); //起始點(diǎn) var cp1x = 20, cp1y = 100; //控制點(diǎn)1 var cp2x = 100, cp2y = 120; //控制點(diǎn)2 var x = 200, y = 200; // 結(jié)束點(diǎn) //繪制二次貝塞爾曲線 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); ctx.stroke(); ctx.beginPath(); ctx.rect(40, 200, 10, 10); ctx.rect(cp1x, cp1y, 10, 10); ctx.rect(cp2x, cp2y, 10, 10); ctx.rect(x, y, 10, 10); ctx.fill(); } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

五、添加樣式和顏色

? 在前面的繪制矩形章節(jié)中，只用到了默認(rèn)的線條和顏色。

? 如果想要給圖形上色，有兩個(gè)重要的屬性可以做到。

fillStyle = color 設(shè)置圖形的填充顏色
strokeStyle = color 設(shè)置圖形輪廓的顏色

備注：

1. color 可以是表示 css 顏色值的字符串、漸變對(duì)象或者圖案對(duì)象。
2. 默認(rèn)情況下，線條和填充顏色都是黑色。
3. 一旦您設(shè)置了 strokeStyle 或者 fillStyle 的值，那么這個(gè)新值就會(huì)成為新繪制的圖形的默認(rèn)值。如果你要給每個(gè)圖形上不同的顏色，你需要重新設(shè)置 fillStyle 或 strokeStyle 的值。

fillStyle

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); for (var i = 0; i < 6; i++){ for (var j = 0; j < 6; j++){ ctx.fillStyle = ‘rgb(‘ + Math.floor(255 – 42.5 * i) + ‘,‘ + Math.floor(255 – 42.5 * j) + ‘,0)‘; ctx.fillRect(j * 50, i * 50, 50, 50); } } } draw();

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

strokeStyle

function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); for (var i = 0; i < 6; i++){ for (var j = 0; j < 6; j++){ ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`; ctx.strokeRect(j * 50, i * 50, 40, 40); } } } draw(); /** 返回隨機(jī)的 [from, to] 之間的整數(shù)(包括from，也包括to) */ function randomInt(from, to){ return parseInt(Math.random() * (to – from + 1) + from); }

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

Transparency(透明度)

globalAlpha = transparencyValue: 這個(gè)屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認(rèn)是 1.0。

? globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時(shí)候相當(dāng)高效。不過(guò)，我認(rèn)為使用rgba()設(shè)置透明度更加好一些。

1、line style

線寬。只能是正值。默認(rèn)是 1.0。

起始點(diǎn)和終點(diǎn)的連線為中心，上下各占線寬的一半。

ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 10); ctx.lineWidth = 10; ctx.stroke(); ctx.beginPath(); ctx.moveTo(110, 10); ctx.lineTo(160, 10) ctx.lineWidth = 20; ctx.stroke()

學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了

2. lineCap = type

線條末端樣式。

共有 3 個(gè)值：

butt：線段末端以方形結(jié)束
round：線段末端以圓形結(jié)束
square：線段末端以方形結(jié)束，但是增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域。

var lineCaps = ["butt", "round", "square"]; for (var i = 0; i < 3; i++){ ctx.beginPath(); ctx.moveTo(20 + 30 * i, 30); ctx.lineTo(20 + 30 * i, 100); ctx.lineWidth = 20; ctx.lineCap = lineCaps[i]; ctx.stroke(); } ctx.beginPath(); ctx.moveTo(0, 30); ctx.lineTo(300, 30); ctx.moveTo(0, 100); ctx.lineTo(300, 100) ctx.strokeStyle = "red"; ctx.lineWidth = 1; ctx.stroke();

3. lineJoin = type

同一個(gè) path 內(nèi)，設(shè)定線條與線條間接合處的樣式。

共有 3 個(gè)值 round, bevel 和 miter：
1. round 通過(guò)填充一個(gè)額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。圓角的半徑是線段的寬度。
2. bevel 在相連部分的末端填充一個(gè)額外的以三角形為底的區(qū)域，每個(gè)部分都有各自獨(dú)立的矩形拐角。
3. miter(默認(rèn)) 通過(guò)延伸相連部分的外邊緣，使其相交于一點(diǎn)，形成一個(gè)額外的菱形區(qū)域。
  
  function draw(){ var canvas = document.getElementById(‘tutorial‘); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); var lineJoin = [‘round‘, ‘bevel‘, ‘miter‘]; ctx.lineWidth = 20; for (var i = 0; i < lineJoin.length; i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(50, 50 + i * 50); ctx.lineTo(100, 100 + i * 50); ctx.lineTo(150, 50 + i * 50); ctx.lineTo(200, 100 + i * 50); ctx.lineTo(250, 50 + i * 50); ctx.stroke(); } } draw();

贊(0)

標(biāo)簽：AI Canvas css DB2 html5 IE9 inter java javaScript macOS NEC ping push set source Square 命令汽車瀏覽器蘋果計(jì)算機(jī)

相關(guān)推薦

網(wǎng)站地圖滬ICP備18035694號(hào)-2

滬公網(wǎng)安備31011702889846號(hào)