繪制矩形效果 · 前端速查手冊

[TOC] >[success] # 繪制矩形效果 ~~~ 1.ctx.rect(100,100,200,100); // 坐標起點的x軸,y軸，矩形寬度和高度，會被覆蓋，值得是有沒beginPath效果 2.ctx.strokeRect(100,100,200,100); // 有beginPath 效果但不能填充只有線展示效果 3.ctx.fillRect(100,100,200,100); // 有beginPath 效果但能填充 4.ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 清除矩形的內容 5.ctx.createLinearGradient(100,100,500,400); // x0y0 起始點 x1y1 結束點確定長度和方向 linearGradient.addColorStop(0,'pink'); linearGradient.addColorStop(1,'blue'); ~~~ >[danger] ##### 繪制矩形案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*繪制矩形路徑不是獨立路徑*/ /*ctx.rect(100,100,200,100); ctx.fillStyle = 'green'; ctx.stroke(); ctx.fill();*/ /*繪制矩形有自己的獨立路徑*/ //ctx.strokeRect(100,100,200,100); ctx.fillRect(100,100,200,100); /*清除矩形的內容*/ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); //ctx.fillRect(100,100,200,100); </script> </body> </html> ~~~ >[danger] ##### 矩形漸變 ![](https://box.kancloud.cn/2e634bafe1cb7542e0bd646a7ef1de2f_568x203.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid #cccccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> /**1.創建一個createLinearGradient 顏色漸變四個參數是，起始點x，y終點的x，y * 2.聲明漸變色和漸變的百分比addColorStop * 3.把創建的createLinearGradient 對象賦值給fillStyle * **/ var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); // 矩形右上角坐標 var linearGradient = ctx.createLinearGradient(100,100,500,100); linearGradient.addColorStop(0,'pink') //linearGradient.addColorStop(0.5,'red'); linearGradient.addColorStop(1,'blue') ctx.fillStyle = linearGradient ctx.fillRect(100,100,400,100); /*pink---->blue*/ /*回想線性漸變---->要素方向起始顏色結束顏色 */ /*通過兩個點的坐標可以控制漸變方向*/ </script> </body> </html> ~~~