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