Canvas简明教程（完整源码）
博客停更⼤半年，趁着圣诞更新了个⼈主页，顺便推⼀篇很乱的⽂章上来哈哈哈哈哈哈哈
主页效果：
原⽂出处：
原⽂出处：
By anxpp
Canvas简明教程
<canvas> 是 HTML5 新增的元素，可⽤于通过使⽤ JavaScript 中的脚本来绘制图形。例如，它可以⽤于绘制图形，制作照⽚，创建动画，甚⾄可以进⾏实时视频处理或渲染。
本例包含个⼈主页全部源码。
浏览器兼容：
元素chrome IE firefox Safari
Canvas 4.0+9.0+ 2.0+ 3.1+ Canvas 能⼲什么
图表
⼩游戏
活动页
特效
背景等
获取 Canvas 对象
⽅法：
- Context(contextType, contextAttributes);
通常我们在创建好⼀个 Canvas 标签的时候，我们要做的第⼀步就是要先获取到这个 Canvas 的上下⽂昌对象。
上下⽂类型（contextType）：
- 2d（本⼩册所有的⽰例都是 2d 的）：代表⼀个⼆维渲染上下⽂
- webgl（或”experimental-webgl”）：代表⼀个三维渲染上下⽂
- webgl2（或”experimental-webgl2”）：代表⼀个三维渲染上下⽂；这种情况下只能在浏览器实现 WebGL 版本2 (OpenGL ES
3.0)。
绘制路径
请结合源码查看效果
⽅法列表
熟悉有些什么⽅法，能做什么即可
⽅法描述
fill()填充路径
stroke()描边
⽅法描述
arc()创建圆弧
rect()创建矩形
fillRect()绘制矩形路径区域
strokeRect()绘制矩形路径描边
clearRect()在给定的矩形内清除指定的像素
arcTo()创建两切线之间的弧/曲线
beginPath()起始⼀条路径，或重置当前路径
moveTo()把路径移动到画布中的指定点，不创建线条
lineTo()添加⼀个新点，然后在画布中创建从该点到最后指定点的线条closePath()创建从当前点回到起始点的路径
clip()从原始画布剪切任意形状和尺⼨的区域
quadraticCurveTo()创建⼆次⽅贝塞尔曲线
bezierCurveTo()创建三次⽅贝塞尔曲线
isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false
⽅法介绍
该部分可以跳过，当参考⼿册即可。
arc() ⽅法：创建弧/曲线（⽤于创建圆或部分圆）
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x：圆的中⼼的 x 坐标。
y：圆的中⼼的 y 坐标。
r：圆的半径
sAngle：起始⾓，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle：结束⾓，以弧度计。
counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。moveTo(x,y)：把路径移动到画布中的指定点，不创建线条
lineTo(x,y)：添加⼀个新点，然后在画布中创建从该点到最后指定点的线条
样式：
- lineCap | 设置或返回线条的结束端点样式
- lineJoin | 设置或返回两条线相交时，所创建的拐⾓类型
- lineWidth | 设置或返回当前的线条宽度
- miterLimit | 设置或返回最⼤斜接长度
fillRect(x,y,width,heighr)：绘制⼀个实⼼矩形
strokeRect(x,y,width,height)：绘制⼀个空⼼矩形
画⼀个点
context4.beginPath();
context4.arc(100, 100, 1, 0, Math.PI * 2, true);
context4.closePath();
context4.fillStyle = 'rgb(255,255,255)';
context4.fill();
绘制弧/曲线
var canvas5 = ElementById("canvas5");
var context5 = Context("2d");
canvas5.width = 400;
canvas5.height = 400;
context5.beginPath();
context5.arc(100, 100, 50, 0, Math.PI * 0.5, false);
context5.strokeStyle = "white";
context5.stroke();
绘制线条
直线：
var canvas6 = ElementById("canvas6");
var context6 = Context("2d");
canvas6.width = 400;
canvas6.height = 400;
context6.beginPath();
context6.lineTo(100,100);
context6.strokeStyle = '#fff';
context6.stroke();
折线：
canvas动画var canvas7 = ElementById("canvas7");
var context7 = Context("2d");
canvas7.width = 400;
canvas7.height = 400;
context7.beginPath();
context7.lineTo(200, 200);
context7.lineTo(200, 100);
context7.lineTo(100, 50);
context7.strokeStyle = '#fff';
context7.stroke();
添加样式
context8.beginPath();
context8.lineTo(100,100);
context8.lineWidth = 10;
context8.lineCap = 'round';
context8.strokeStyle = '#fff';
context8.stroke()
绘制矩形
var canvas9 = ElementById("canvas9");
var context9 = Context("2d");
canvas9.width = 400;
canvas9.height = 400;
context9.beginPath();
context9.fillStyle = '#fff';
context9.fillRect(10, 10, 100, 100);
context9.strokeStyle = '#fff';
context9.strokeRect(130, 10, 100, 100);
颜⾊、样式和阴影
fillStyle | 设置或返回⽤于填充绘画的颜⾊、渐变或模式
strokeStyle | 设置或返回⽤于笔触的颜⾊、渐变或模式
shadowColor | 设置或返回⽤于阴影的颜⾊
shadowBlur | 设置或返回⽤于阴影的模糊级别
shadowOffsetX | 设置或返回阴影距形状的⽔平距离
shadowOffsetY | 设置或返回阴影距形状的垂直距离
阴影
var canvas10 = ElementById("canvas10");
var context10 = Context("2d");
canvas10.width = 400;
canvas10.height = 400;
context10.beginPath();
context10.arc(100,100,50,0,2*Math.PI,false);
context10.fillStyle = '#fff';
context10.shadowBlur = 20;
context10.shadowColor = '#fff';
context10.fill()
渐变
createLinearGradient() 创建线性渐变（⽤在画布内容上）
createPattern() 在指定的⽅向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（⽤在画布内容上）addColorStop() 规定渐变对象中的颜⾊和停⽌位置
x0：开始渐变的 x 坐标
y0：开始渐变的 y 坐标
x1：结束渐变的 x 坐标
y1：结束渐变的 y 坐标
gradient.addColorStop(stop,color)：
stop：介于 0.0 与 1.0 之间的值，表⽰渐变中开始与结束之间的位置。
color：在结束位置显⽰的 CSS 颜⾊值
粉⾊到⽩⾊的由上向下的渐变：
var canvas11 = ElementById("canvas11");
var context11 = Context("2d");
canvas11.width = 400;
canvas11.height = 400;
var grd11 = ateLinearGradient(100,100,100,200);
grd11.addColorStop(0,'pink');
grd11.addColorStop(1,'white');
context11.fillStyle = grd11;
context11.fillRect(100,100,200,200);
彩虹渐变：
var canvas12 = ElementById("canvas12");
var context12 = Context("2d");
canvas12.width = 400;
canvas12.height = 400;
var grd12 = ateLinearGradient(0,0,0,400);
grd12.addColorStop(0,'rgb(255, 0, 0)');
grd12.addColorStop(0.2,'rgb(255, 165, 0)');
grd12.addColorStop(0.3,'rgb(255, 255, 0)');
grd12.addColorStop(0.5,'rgb(0, 255, 0)');
grd12.addColorStop(0.7,'rgb(0, 127, 255)');
grd12.addColorStop(0.9,'rgb(0, 0, 255)');
grd12.addColorStop(1,'rgb(139, 0, 255)');
context12.fillStyle = grd12;
context12.fillRect(0,0,400,400);
图形转换
scale() 缩放当前绘图⾄更⼤或更⼩
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运⾏ transform()缩放
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论