做網站推廣多少錢黑帽seo聯系方式
文章目錄
- 一、什么是Canvas？
- 二、Canvas優(yōu)缺點
- 1.優(yōu)點
- 2.缺點
- 3.檢查瀏覽器是否支持Canvas。
- 三、坐標系
- 四、繪制矩形
- 1.Canvas支持兩種方式來繪制矩形：**矩形方法 和 路徑方法**。
- 2.Canvas 繪圖的矩形方法：
- 五、認識路徑
- 1. 什么是路徑？
- 2. 如何用路徑繪制圖形？
- 3.所需函數
- 六、路徑-繪制直線
- 七、路徑-繪制三角形
- 八、路徑-繪制圓弧，圓
- 1. 繪制圓弧或者圓，使用arc()方法
- 2. 弧度計算
- 3.案例
- 九、路徑-繪制矩形
一、什么是Canvas？
Canvas 最初由Apple于2004 年引入，用于Mac OS X WebKit組件，為儀表板小部件和Safari瀏覽器等應用程序提供支持。
后來，它被Gecko內核的瀏覽器（尤其是Mozilla Firefox），Opera和Chrome實現，并被網頁超文本應用技術工作小組提議
為下一代的網絡技術的標準元素（HTML5新增元素）。
Canvas提供了非常多的JavaScript繪圖API（比如：繪制路徑、矩形、圓、文本和圖像等方法），與元素可以繪制
各種2D圖形。
二、Canvas優(yōu)缺點
1.優(yōu)點
1.1 Canvas提供的功能更原始，適合像素處理，動態(tài)渲染和數據量大的繪制，如：圖片編輯、熱力圖、炫光尾跡特效等。
1.2 Canvas非常適合圖像密集型的游戲開發(fā)，適合頻繁重繪許多的對象。
1.3 Canvas能夠以 .png 或 .jpg 格式保存結果圖像，適合對圖片進行像素級的處理。
2.缺點
2.1 在移動端可以能會因為Canvas數量多，而導致內存占用超出了手機的承受能力，導致瀏覽器崩潰。
2.2 Canvas 繪圖只能通過JavaScript腳本操作（all in js）。
2.3 Canvas 是由一個個像素點構成的圖形，放大會使圖形變得顆粒狀和像素化，導致模糊。
3.檢查瀏覽器是否支持Canvas。
測試 canvas.getContext() 方法的存在
三、坐標系
默認的坐標原點在元素左上角，當然，如我們上一節(jié)所講 你可以通過形變，改變坐標原點
四、繪制矩形
1.Canvas支持兩種方式來繪制矩形：矩形方法 和 路徑方法。
1.1 路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。
1.2 除了矩形，其他的圖形都是通過一條或者多條路徑組合而成的。
1.3 通常我們會通過眾多的路徑來繪制復雜的圖形。
2.Canvas 繪圖的矩形方法：
2.1 fillRect(x, y, width, height)： 繪制一個填充的矩形。
2.2 strokeRect(x, y, width, height)： 繪制一個矩形的邊框。
2.3 clearRect(x, y, width, height)： 清除指定矩形區(qū)域，讓清除部分完全透明。
2.4 x 與 y 指定了在canvas畫布上所繪制矩形的左上角（相對于原點）的坐標（不支持 undefined ）。
<!DOCTYPE html>
<html lang="zh-CH">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}</style>
</head>
<body><!-- 如果不給寬高 默認寬300px 高150px --><canvas id="box" width="300" height="300">您的瀏覽器不兼容Canvas，請升級瀏覽器</canvas><script>window.onload = function() {const canvasEl = document.getElementById('box')console.log('%O', canvasEl);if (!canvasEl.getContext) return// 獲取cancas渲染上下文let ctx = canvasEl.getContext('2d') // 2d /webglconsole.log(ctx);// 在原點繪制一個填充的寬100px搞50px的矩形ctx.fillStyle = 'green'; // 不設置顏色時 默認為填充黑色（如果需要設置顏色，必須寫在繪制元素的前面）ctx.fillRect(0, 0, 100, 50)// 繪制描邊的矩形// ctx.strokeStyle = 'green';ctx.strokeRect(100, 100, 100, 50)// 清除指定區(qū)域的矩形// ctx.clearRect(0, 0, 50, 25)}</script>
</body>
</html>
五、認識路徑
1. 什么是路徑？
1.1 圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。
1.2 路徑是可由很多子路徑構成，這些子路徑都是在一個列表中，列表中所有子路徑（線、弧形等）將構成圖形。
1.3 一個路徑，甚至一個子路徑，通常都是閉合的。
2. 如何用路徑繪制圖形？
2.1 首先需要創(chuàng)建路徑起始點（beginPath）。
2.2 然后使用畫圖命令去畫出路徑( arc 、lineTo )。
2.3 之后把路徑閉合( closePath , 不是必須)。
2.4 一旦路徑生成，就能通過描邊(stroke)或填充路徑區(qū)域(fill)來渲染圖形。
3.所需函數
3.1 beginPath()：新建一條路徑，生成之后，圖形繪制命令被指向到新的路徑上繪圖，不會關聯到舊的路徑。
3.2 closePath()：閉合路徑之后圖形繪制命令又重新指向到 beginPath之前的上下文中。
3.3 stroke()：通過線條來繪制圖形輪廓/描邊（針對當前路徑圖形）。
3.4 fill()：通過填充路徑的內容區(qū)域生成實心的圖形（針對當前路徑圖形）。
六、路徑-繪制直線
<!DOCTYPE html>
<html lang="zh-CH">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}</style>
</head>
<body><!-- 如果不給寬高 默認寬300px 高150px --><canvas id="box" width="300" height="300">您的瀏覽器不兼容Canvas，請升級瀏覽器</canvas><script>window.onload = function() {const canvasEl = document.getElementById('box')if (!canvasEl.getContext) returnlet ctx = canvasEl.getContext('2d')// 0. 設置線條的屬性(不設置 就會用默認的)// ctx.lineWitdh = 10// ctx.strokeStyle = 'green';// 1. 創(chuàng)建路徑起點ctx.beginPath()// 2. 移動畫筆(確定從哪里開始畫)ctx.moveTo(0,10)// 繪制一條從當前位置到指定 (x ，y)位置的直線ctx.lineTo(100, 10)// 閉合路徑（不是必須寫，但建議寫）ctx.closePath()// 描邊（繪制線條只能用stroke不能用fill）ctx.stroke()}</script>
</body>
</html>
七、路徑-繪制三角形
<!DOCTYPE html>
<html lang="zh-CH">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}</style>
</head>
<body><!-- 如果不給寬高 默認寬300px 高150px --><canvas id="box" width="300" height="300">您的瀏覽器不兼容Canvas，請升級瀏覽器</canvas><script>window.onload = function() {const canvasEl = document.getElementById('box')if (!canvasEl.getContext) returnlet ctx = canvasEl.getContext('2d')// 描邊三角形ctx.beginPath()ctx.moveTo(50,0)ctx.lineTo(100, 50)ctx.lineTo(50, 100)// ctx.closePath()ctx.stroke()// 實心三角形ctx.beginPath()ctx.moveTo(150,0)ctx.lineTo(200, 50)ctx.lineTo(150, 100)// ctx.closePath()ctx.fill() //他會自動閉合路徑}</script>
</body>
</html>
八、路徑-繪制圓弧，圓
1. 繪制圓弧或者圓，使用arc()方法
1.1 arc(x, y, radius, startAngle, endAngle, anticlockwise)，該方法有六個參數：
? x、y：為繪制圓弧所在圓上的圓心坐標。
? radius：為圓弧半徑。
? startAngle、endAngle：該參數用弧度定義了開始以及結束的弧度。這些都是以 x 軸為基準。
? anticlockwise：為一個布爾值。為 true ，是逆時針方向，為false，是順時針方向，默認為false。
2. 弧度計算
? arc() 函數中表示角的單位是弧度，不是角度。
? 角度與弧度的 JS 表達式：弧度=( Math.PI / 180 ) * 角度 ，即 1角度= Math.PI / 180 個弧度
比如：旋轉90°：Math.PI / 2； 旋轉180°：Math.PI ； 旋轉360°：Math.PI * 2； 旋轉-90°：-Math.PI / 2；
3.案例
<!DOCTYPE html>
<html lang="zh-CH">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;}canvas {background-color: rgba(255, 0, 0, 0.1);}</style>
</head>
<body><!-- 如果不給寬高 默認寬300px 高150px --><canvas id="box" width="300" height="300">您的瀏覽器不兼容Canvas，請升級瀏覽器</canvas><script>window.onload = function() {const canvasEl = document.getElementById('box')if (!canvasEl.getContext) returnlet ctx = canvasEl.getContext('2d')// 圓ctx.beginPath()ctx.arc(50, 50, 25, 0, Math.PI * 2, false)// ctx.closePath()ctx.stroke()// 填充圓ctx.beginPath()ctx.arc(150, 50, 25, 0, Math.PI * 2, false)// ctx.closePath()ctx.fill()// 圓弧ctx.beginPath()ctx.arc(150, 150, 25, 0, Math.PI, false)// ctx.closePath()ctx.stroke()}</script>
</body>
</html>
九、路徑-繪制矩形
和上面的繪制矩形差不多，就不加圖片了
<!DOCTYPE html>
<html lang="zh-CH">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;margin: auto;background-image: url(../images/grid.png);}canvas {background-color: rgba(255, 0, 0, 0.1);}</style>
</head>
<body><!-- 如果不給寬高 默認寬300px 高150px --><canvas id="box" width="300" height="300">您的瀏覽器不兼容Canvas，請升級瀏覽器</canvas><script>window.onload = function() {const canvasEl = document.getElementById('box')if (!canvasEl.getContext) returnlet ctx = canvasEl.getContext('2d')ctx.beginPath()// ctx.moveTo(0,0)ctx.rect(10, 10, 100, 50)// ctx.closePath()// ctx.stroke()ctx.fill()}</script>
</body>
</html>