本文详细介绍了HTML5Canvas库在绘制矩形、圆弧、笑脸、线段、贝塞尔曲线等图形，以及线性渐变、径向渐变的使用，同时涵盖样式控制和动画实现。
// ctx.rect(00,100,300,300)
// ctx.fill()
**效果：**
##### 4.1.2、canvas矩形绘制(路径模式)
使用strokeRect进行路径绘制
**strokeRect属性：**
// ctx.strokeRect(位置x，位置y，宽、高)
ctx.strokeRect(100, 100, 400, 200);
// strokeRect拆开写法
ctx.rect(100, 100, 400, 200)
ctx.stroke()
**完整代码：**
**效果：**
##### 4.1.3、canvas矩形绘制(清除模式)
**绘制并清除矩形:**
// 清除方式绘制矩形
// beginPath和closePath可以完成路径的分段
ctx.beginPath();
// rect绘制路径
ctx.rect(100, 100, 200, 100);
// stroke显示路径
ctx.stroke();
// 画笔结束
ctx.closePath();
// 画笔开始
ctx.beginPath();
ctx.rect(200, 150, 200, 100);
// fill填充
ctx.fill();
// 画笔结束
ctx.closePath();
**完整代码：**
// 清除方式绘制矩形
// beginPath和closePath可以完成路径的分段
ctx.beginPath();
// rect绘制路径
ctx.rect(100, 100, 200, 100);
// stroke显示路径
ctx.stroke();
// 画笔结束
ctx.closePath();
// 画笔开始
ctx.beginPath();
ctx.rect(200, 150, 200, 100);
// fill填充
ctx.fill();
// 画笔结束
ctx.closePath();
let height = 0;
// 把矩形部分清除
let t1 = setInterval(() => {
height++;
ctx.clearRect(0, 0, canvas1.clientWidth, height);
if (height > canvas1.clientHeight) {
clearInterval(t1);
}
}, 10);
**效果：**
### 4.2、canvas绘制圆弧与笑脸
绘制圆弧或者圆，我们使用arc0方法。当然可以使用arcTo0，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。
##### 4.2.1、绘制圆形
使用strokeRect进行绘制
**arc属性：**
// ctx.arc(圆心x坐标，圆心y坐标，半径,开始角度，结束角度，顺/逆时针,第六个参数(可选的)设置true则是逆时针)
//ctx.context.arc(x, y, radius, Math.PI / 180 \* startAngle, Math.PI / 180 \* endAngle, anticlockwise);
ctx.strokeRect(100, 100, 400, 200);
// strokeRect拆开写法
ctx.arc(300, 200, 100,0,Math.PI\*2);
// fill填充
ctx.fill();
**完整代码:**
**效果**
##### 4.2.2、绘制半圆
// arc绘制圆弧的方法
// ctx.arc(圆心x坐标，圆心y坐标，半径,开始角度，结束角度，顺/逆时针)
ctx.arc(300, 200, 100,0,Math.PI);
// fill填充
ctx.fill();
**效果**
##### 4.2.3、绘制笑脸(方法一)
**繁琐版代码**
// 绘制脸部
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
// 绘制嘴巴
ctx.beginPath();
ctx.arc(75, 75, 35, 0 , Math.PI );
ctx.stroke();
ctx.closePath();
// 绘制眼睛(左)
ctx.beginPath();
ctx.arc(60,65,5,0,Math.PI*2)
ctx.stroke();
ctx.closePath();
// 绘制眼睛(右)
ctx.beginPath();
ctx.arc(90,65,5,0,Math.PI*2)
ctx.stroke();
ctx.closePath();
// stroke路径
ctx.stroke();
**效果**
##### 4.2.3、绘制笑脸(方法二)
使用move.To移动点绘制笑脸
moveTo可以用来绘制一条不连续的路径
**完整代码**
// 绘制脸部
ctx.arc(75,75,50,0,Math.PI*2);
// moveTo可以用来绘制一条不连续的路径
ctx.moveTo(110, 75);
// 绘制嘴巴
ctx.arc(75, 75, 35, 0 , Math.PI );
ctx.moveTo(65, 65);
// 绘制眼睛(左)
ctx.arc(60,65,5,0,Math.PI*2)
ctx.moveTo(90, 65);
// 绘制眼睛(右)
ctx.arc(90,65,5,0,Math.PI*2)
// stroke路径
ctx.stroke();
**效果**
### 4.3、canvas绘制折线线段
##### 4.3.1、绘制线段
绘制直线，需要用到的方法lineTo。开始点也可以通过moveTo0函数改变。
**完整代码**
**效果**
##### 4.3.1、绘制三角形(路经版和填充版)
**完整代码**
// 填充版
ctx.beginPath();
ctx.moveTo(200 ,100);
ctx.lineTo(250, 150);
ctx.lineTo(250,100)
ctx.lineTo(200,100)
ctx.fill();
ctx.closePath();
**效果**
### 4.4、arcTo方法绘制圆弧方式
**完整代码**
**效果**
### 4.5、二次贝塞尔曲线实现聊天气泡框
一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
**完整代码**
**效果**
### 4.6、三次贝塞尔曲线实现献给女朋友的爱心
贝塞尔曲线应用于二维图形应用程序的数学曲线。 一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
**完整代码**
btx.closePath();
**效果**
### 4.8、封装路径path2d
**完整代码**
// 封装爱心路径
var heatPath=new Path2D()
// ctx.beginPath();
// 移动到起点
heatPath.moveTo(300,200)
// 2个控制点一个终点(右半心)
heatPath.bezierCurveTo(350, 150,450, 200, 300, 300);
// 左边心
heatPath.bezierCurveTo(150, 200,250, 150, 300, 200);
ctx.fillStyle = ‘rgb(234, 67, 111)’;
ctx.fill(heatPath);
// ctx.closePath(heatPath);
// 封装聊天框路径
var chatPath=new Path2D()
chatPath.moveTo(200, 300);
chatPath.quadraticCurveTo(150, 300, 150, 200);
chatPath.quadraticCurveTo(150, 100, 300, 100);
chatPath.quadraticCurveTo(450, 100, 450, 200);
chatPath.quadraticCurveTo(450, 300, 250, 300);
chatPath.quadraticCurveTo(250, 350, 150, 350);
chatPath.quadraticCurveTo(200, 350, 200, 300);
ctx.stroke(chatPath);
// 创建折线
// M 起点10 10 h水平移动80 垂直移动v80 垂直移动-80 z回原点
var polyline=new Path2D(“M 10 10 h 80 v 80 h -80 z”)
ctx.stroke(polyline)
**效果**
## 五、canvas样式
### 5.1、样式和颜色控制
在绘制图形的竟节里，我只用到默认的线条和填充样式。接下来，我们将会探讨 anvas 全部的可选项，来绘制出更加吸引人的内容。
**strokeStyle轮廓样式和fillStyle填充样式和globalAlpha设置全局透明度**
// globalAlpha设置全局透明度,一般不这样使用
// ctx.globalAlpha = 0.5;
// strokeStyle轮廓样式 支持单词、rgb、rgba、十六进制 ctx.strokeStyle='blue';
ctx.stroke(heatPath)
// fillStyle填充样式 支持单词、rgb、rgba、十六进制
ctx.fillStyle = 'rgb(234, 67, 111)';
ctx.fill(heatPath);
**完整代码**
// strokeStyle轮廓样式 支持单词、rgb、rgba、十六进制
ctx.strokeStyle = ‘blue’;
ctx.stroke(heatPath)
// fillStyle填充样式 支持单词、rgb、rgba、十六进制
ctx.fillStyle = ‘rgba(255, 200,200,0.3)’;
ctx.fill(heatPath);
**效果**
strokeStyle轮廓样式
fillStyle填充样式
globalAlpha设置全局透明度
### 5.2、线性渐变和径向渐变
##### 线性渐变
**常用方法**
// 创建线性渐变 createLinearGradient(起点x，起点y，终点x，终点y)
let lineGradient = ctx.createLinearGradient(0, 0, 600, 400);
// addColorStop(number, ‘color’) 从0开始过程中颜色设置从红到粉色
lineGradient.addColorStop(0, “red”);
lineGradient.addColorStop(1, “pink”);
**完整代码**
// addColorStop(number, ‘color’) 从0开始过程中颜色设置从红到粉色
lineGradient.addColorStop(0, “red”);
lineGradient.addColorStop(1, “pink”);
// 从红到粉到蓝
// lineGradient.addColorStop(0, ‘red’);
// lineGradient.addColorStop(0.5, ‘pink’);
// lineGradient.addColorStop(1, ‘blue’);
ctx.fillStyle = lineGradient;
ctx.fillRect(0, 0, 600, 400);
**效果**
红=>粉线性渐变
红=>粉=>蓝线性渐变
##### 封装渲染函数结合请求动画帧实现动画渐变
**完整代码**
`
最后
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》
ineGradient;
ctx.fillRect(0, 0, 600, 400);
**效果**
红=>粉线性渐变
红=>粉=>蓝线性渐变
##### 封装渲染函数结合请求动画帧实现动画渐变
**完整代码**
`
最后
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》
[外链图片转存中…(img-HNAD1TBe-1714561965794)]
[外链图片转存中…(img-nDrf6irR-1714561965795)]
[外链图片转存中…(img-Gl4GbFfa-1714561965796)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
