canvas 圆角矩形填充_一篇文章让你学会你最“害怕”的Canvas，太有意思了
Canvas畫布
基本用法
<canvas id='canvas' width="150" height="150"></canvas> <canvas>看起來跟img標簽有點像，唯一不同的是它沒有src屬性和alt屬性。實際上，canvas標簽只有兩個屬性:width和height。
如果沒有設置寬度和高度，默認的canvas會初始化width：300px,height:150px
渲染上下文對象
canvas標簽創造了一個固定大小的畫布，它有一個或者多個渲染上下文對象，用它可以繪制和處理要展示的內容。接下來我們把注意力放在2D渲染上下文中。
canvas起初是空白的。為了展示，首先腳本需要找到渲染上下文，然后在它的上面繪制。canvas元素有一個叫做 getContext()的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式。
打印結果：
繪制形狀
在這里你將學會如何繪制矩形、三角形、直線、圓弧和曲線。如果想繪制比較復雜的圖形，我們需要掌握路徑。
柵格(了解)
繪制矩形常用API
繪制一個填充的矩形
fillRect(x,y,width,height);繪制一個矩形的邊框
strokeRect(x, y, width, height)清除指定矩形區域，讓清除部分完全透明。
clearRect(x, y, width, height)上面提供的方法之中每個都包含了相同的參數。x和y指定了canvas畫布上所繪制的矩形的左上角(相對于原點)的坐標。width和height設置矩形的尺寸。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.fillRect(25, 25, 100, 100);ctx.clearRect(45, 45, 60, 60);ctx.strokeRect(50, 50, 50, 50);</script></body> </html>效果顯示:
填充顏色和描邊顏色設置
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red';//填充顏色 ctx.strokeStyle = 'green';//描邊顏色使用路徑繪制圖形
圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪制圖形我們需要做以下幾步。
繪制路徑常用api
beginPath()
closePath()
閉合路徑之后圖形繪制api又重新指向了上下文中stroke()
通過線條來繪制圖形輪廓fill()
通過填充路徑的內容區域生成實心的圖形moveTo(x,y)
：將畫筆移動到指定的坐標x以及y上當canvas初始化或者beginPath()調用后，你通常會使用moveTo()函數設置起點。我們也能夠使用moveTo()繪制一些不連續的路徑
lineTo(x,y)
:繪制直線，繪制一條從當前位置到指定x以及y位置的直線該方法有兩個參數：x以及y ，代表坐標系中直線結束的點。開始點和之前的繪制路徑有關，之前路徑的結束點就是接下來的開始點，等等。。。開始點也可以通過moveTo()函數改變。
看個例子：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');// 填充三角形ctx.beginPath();ctx.moveTo(25, 25);ctx.lineTo(105, 25);ctx.lineTo(25, 105);ctx.fill();// 描邊三角形ctx.beginPath();ctx.moveTo(125, 125);ctx.lineTo(125, 45);ctx.lineTo(45, 125);ctx.closePath();ctx.stroke();</script></body> </html>效果展示：
arc()
繪制圓弧或者圓
arc(x,y,radius,startAngle,endAngle,anticlockwise);圓心在 (x, y) 位置，半徑為 radius ，根據anticlockwise （默認為順時針）指定的方向從 startAngle 開始繪制，到 endAngle 結束。
anticlockwise:可選的，布爾值，如果為true，逆時針繪制圓弧，反之，順時針繪制笑臉例子
效果展示：
quadraticCurveTo(cp1x,cp1y,x,y)
繪制二次貝塞爾曲線,cp1x,cp1y為一個控制點，x,y為結束點bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪制三次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。看圖：
參數x、y在兩個方法中都是結束點坐標。cp1x,cp1y為坐標的第一個控制點(上圖中的紅色點)，cp2x,cp2y為坐標中的第二個控制點
二次貝賽爾曲線繪制對話氣泡
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(75, 25);ctx.quadraticCurveTo(25, 25, 25, 62.5);ctx.quadraticCurveTo(25, 100, 50, 100);ctx.quadraticCurveTo(50, 120, 30, 125);ctx.quadraticCurveTo(60, 120, 65, 100);ctx.quadraticCurveTo(125, 100, 125, 62.5);ctx.quadraticCurveTo(125, 25, 75, 25);ctx.stroke();</script></body> </html>三次貝塞爾曲線繪制
//三次貝塞爾曲線 ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();效果展示:
rect(x,y,width,height)
繪制矩形注意：當你調用fill()函數時，所有沒有閉合的形狀都會自動閉合，所以你需要調用closePath()函數。但是調用stroke()時不會自動閉包樣式和顏色
- fillStyle = color:設置圖形的填充顏色
- strokeStyle = color: 設置圖形邊框的顏色
- globalAlpha :設置透明度值，取值范圍為0~1之間的數值
- lineWidth = value:設置線條寬度，數值無單位
- lineCap = type 設置線段末端的樣式
- type:butt 默認值，方形
- type:round 圓形
- type:square 以方形結束，但是增加一個寬度和線段相同，寬度是線段寬度一半的矩形區域
- lineJoin = type:設定線條和線條連接的樣式
- type:round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。
- type:bevel 在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。
- type: miter 通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域
繪制文本
canvas提供了兩種方法來渲染文本
filleText(text,x,y,[,maxWidth])
在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的strokeText(text,x,y,[,maxWidth])
在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="500" height="200" style="border: 1px solid #666;"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');// 設置字體大小和字體ctx.font = '30px 微軟雅黑';ctx.fillText('hello world',50,50);ctx.strokeText('hello world',50,80);</script></body> </html>效果：
有樣式的文本
- font = value
當前我們用來繪制文本的樣式. 這個字符串使用和 CSS font屬性相同的語法. 默認的字體是 10px sans-serif。
- textAlign = value
文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。
- textBaseline = value
基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。
- direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默認值是 inherit。
使用圖片
canvas更有意思的一項特性就是圖像操作能力。可以用于動態的圖像合成或者作為圖形的背景，以及游戲界面（Sprites）等等。瀏覽器支持的任意格式的外部圖片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以將同一個頁面中其他canvas元素生成的圖片作為圖片源。
引入圖像到canvas里需要以下兩步基本操作：
核心方法
drawImage(imgObj,x,y,width,height,dx,dy,dWith,dHeight)
其中imgObj是image或者canvas對象，x和y是在canvas里的起始坐標。后面兩個參數是可選的，默認是當前畫布設置的大小。這兩個參數用來控制當前canvas縮放的大小。
如果是8個參數，用來控制做切片顯示，前四個參數是定義圖像源后的切片位置和大小，后四個參數是定義切片的目標顯示的位置和大小
例子：一個簡單的線圖
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript">var ctx = document.getElementById('canvas').getContext('2d');var img = new Image();img.onload = function() {ctx.drawImage(img, 0, 0);ctx.beginPath();ctx.moveTo(123, 400);ctx.lineTo(198, 350);ctx.lineTo(300, 200);ctx.lineTo(500, 150);ctx.stroke();}img.src = 'image-20190703114102416.png';</script></body> </html>效果展示：
狀態的保存和恢復
save()
保存畫布的所有狀態
restore()
save和restore方法是用來保存和恢復canvas狀態的。都沒有參數。
栗子：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="200" height="200"></canvas><script type="text/javascript">function draw(){var ctx = document.getElementById('canvas').getContext('2d');ctx.fillRect(0,0,150,150);//默認繪制一個矩形ctx.save();//保存當前狀態ctx.fillStyle = 'red'; //在原有配置基礎上對顏色發生改變ctx.fillRect(15,15,120,120);ctx.save();//保存當前狀態ctx.fillStyle = 'green'; //再次改變顏色ctx.globalAlpha = 0.5; //改變透明度ctx.fillRect(30,30,90,90);//使用新的配置繪制一個矩形ctx.restore(); //重載之前的顏色狀態 (紅色)ctx.fillRect(45,45,60,60); //使用上一次的配置繪制一個矩形ctx.restore(); //加載默認的顏色配置ctx.fillRect(60,60,30,30); //使用默認配置繪制矩形}draw();</script></body> </html>效果展示：
移動translate
translate(x,y)
translate方法接收兩個參數。x是左右偏移量，y是上下偏移量。在做變形之前先保存狀態是良好的一個習慣
栗子
function draw() {var ctx = document.getElementById('canvas').getContext('2d');for (var i = 0; i < 3; i++) {for (var j = 0; j < 3; j++) {ctx.save();ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';ctx.translate(10 + j * 50, 10 + i * 50);ctx.fillRect(0, 0, 25, 25);ctx.restore();}} }效果：
旋轉rotate(angle)
只接受一個參數：選裝的角度。順時針方向
基本動畫
如何通過canvas來制作動畫呢？
步驟：
通過clearReact()來清空canvas，保證自己的畫布是干凈的
操控動畫的方法setInterval(functuon,delay)
在設定好間隔時間后，function會定期執行setTimeout(function,delay)
在設定好的時間之后執行函數requestAnimationFrame(callback)
此方法一般每秒鐘回到函數執行60次。告訴瀏覽器你希望執行一個動畫，并在重繪之前，請求瀏覽器執行一個特定的函數來更新動畫。做三個案例效果1.太陽系動畫
效果展示：
高級動畫
制作高級動畫小球
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="600" height="300" style="border: 1px solid #000000;"></canvas><script type="text/javascript">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var raf;var running = false;var ball = {x: 100, //x坐標y: 100, //y坐標vx: 5, //x軸方向步伐vy: 2, //y軸方向步伐radius: 25, //半徑color: 'blue', //顏色drawBall: drawBall // 畫的動作}// 畫球的方法function drawBall() {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);ctx.closePath();ctx.fillStyle = this.color;ctx.fill();}function clear() {ctx.fillStyle = 'rgb(255,255,255,0.3)';ctx.fillRect(0, 0, canvas.width, canvas.height);}function draw() {clear();// 之前用clearReact()方法來清除前一幀動畫,換成filleReact()方法來實現長尾效果// ctx.clearRect(0, 0, canvas.width, canvas.height);ball.drawBall();ball.x += ball.vx;ball.y += ball.vy;// 處理邊界if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {ball.vy = -ball.vy;}if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {ball.vx = -ball.vx;}raf = window.requestAnimationFrame(draw);}// canvas.addEventListener('mouseover', function() {// raf = window.requestAnimationFrame(draw);// });canvas.addEventListener('mousemove', function(e) {if(!running){clear();ball.x = e.clientX;ball.y = e.clientY;ball.drawBall();}});canvas.addEventListener('click', function() {if(!running){window.requestAnimationFrame(draw);running = true;}});canvas.addEventListener('mouseout', function() {window.cancelAnimationFrame(raf);running = false;});ball.drawBall();</script></body> </html>效果顯示:
如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
我這里有前端進階架構vip學習資料，包含內容有：HTML、css3、JavaScript、Vue，移動端web開發，Ajax、jQuery、canvas、等多個知識點。需要獲取這些內容的朋友可以私信回復我“前端”兩個字領取
總結
以上是生活随笔為你收集整理的canvas 圆角矩形填充_一篇文章让你学会你最“害怕”的Canvas，太有意思了的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bat文件名操作_Excel按文件名制作
- 下一篇： abaqus单位_ANSYS和ABAQU