绘制矩形效果 · 前端速查手册

[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> ~~~