目录
图形我们已经会绘制了，但是单一的图形肯定不好看，就像html没了css一样，所以今天我们要把图形上色。
1.封装路径
new Path2D()进行封装，将爱心封装成一个路径，然后在进行路径的绘制填充等一些操作，这样的优点就是可以使后面进行其他方法使用更加便捷。
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 封装一个爱心路径
var hertPath = new Path2D();
hertPath.moveTo(300, 200);
hertPath.bezierCurveTo(350, 150, 400, 200, 300, 250);
hertPath.bezierCurveTo(200, 200, 250, 150, 300, 200);
ctx.fill(hertPath);
2.添加颜色
万年不变的第一步， 创建画布拿到 画笔进行 绘制，这里进行绘制的是一个爱心，这里首先是进行了一个封装操作，使用 new Path2D()进行封装，然后使用 fillStyle进行颜色的填充，也可以使用这个属性 strokeStyle进行轮廓颜色添加，这里的globalAlpha的作用就类似于opacity的作用，是全局所有的颜色进行一个透明度设置
var c1 = document.querySelector('#c1');
var ctx = c1.getContext('2d');
// 设置全局透明度
ctx.globalAlpha = 0.5;
// 封装一个爱心路径
var hertPath = new Path2D();
hertPath.moveTo(300, 200);
hertPath.bezierCurveTo(350, 150, 400, 200, 300, 250);
hertPath.bezierCurveTo(200, 200, 250, 150, 300, 200);
ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';
ctx.fill(hertPath);
ctx.stroke(hertPath);
3.渐变特效
3.1线性渐变
绘制一个正方形在100，200的地方正方形的宽高都为300，由于画布并没有那么大，所以呈现的是一个长方形使用 createLinearGradient进行线性渐变颜色的创建，这单词本身也有线性渐变的意思，他里面的参数分别是，在这里的也就是从100，200坐标开始，知道400，500坐标，使用 addColorStop颜色的渐变设置他里面有三个参数分别是stop和color，stop从0.0到1.0，color就是所要进行线性渐变的颜色这里创建了一个函数，实现动态渐变的效果，因为stop是从0.0到1.0的所以在该范围内设置一个值并且每次符合条件就进行+=0.01，这样就能实现一个过度的效果，（甲：就这么一个函数就能实现吗？）我的回答是：no，他需要配和 requestAnimationFrame进行使用，这是一个专门服务于canvas的一个动画函数，使用他就可以进行动态效果的展示了，下面的效果自己看吧。
x0
渐变开始点的 x 坐标
y0
渐变开始点的 y 坐标
x1
渐变结束点的 x 坐标
y1
渐变结束点的 y 坐标
// 找到画布
var c1 = document.querySelector('#c1');
// 获取画笔，上下文对象
var ctx = c1.getContext('2d');
// 绘制图形(x,y,width，height)
// 颜色渐变
var index = 0;
function render() {
ctx.clearRect(0, 0, 600, 400);
index += 0.01;
if (index > 1) {
index = 0;
}
let linearGradient = ctx.createLinearGradient(100, 200, 400, 500);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(index, 'plum');
linearGradient.addColorStop(1, 'blue');
ctx.fillStyle = linearGradient;
ctx.fillRect(100, 200, 300, 300);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
渐变效果
3.2径向渐变
啥是径向渐变呢？顾名思义，径向渐变，实际上就是 椭圆渐变，圆只是一种特殊的椭圆。 径向渐变从圆心点以椭圆形状向外扩散，渐变的实现由两部分组成：椭圆和颜色。 椭圆部分用来控制径向渐变的位置、大小和形状等。 createRadialGradient用法和 createLinearGradient差不多，参数如下，开始和结束的坐标都为300，200，半径是从0变化到100的，这样就能是实现下图的效果啦
x0
渐变的开始圆的 x 坐标
y0
渐变的开始圆的 y 坐标
r0
开始圆的半径
x1
渐变的结束圆的 x 坐标
y1
渐变的结束圆的 y 坐标
r1
结束圆的半径
// 找到画布
var c1 = document.querySelector('#c1');
// 获取画笔，上下文对象
var ctx = c1.getContext('2d');
// 绘制图形(x,y,width，height)
// 径向颜色渐变
let radiaGradient = ctx.createRadialGradient(300, 200, 0, 300, 200, 100);
radiaGradient.addColorStop(0, 'red');
radiaGradient.addColorStop(0.3, 'plum');
radiaGradient.addColorStop(1, 'blue');
ctx.fillStyle = radiaGradient;
ctx.fillRect(0, 0, 600, 400);
3.3径向渐变模拟3d球
首先要创建画布，再拿到画笔，在使用 arc进行圆形的绘制，在使用 径向渐变从250，150的坐标开始绘制半径从15绘制到100直到绘制到300，200的坐标结束绘制，这里的 颜色尤为重要，3d球主要是靠颜色的差值来模拟3d形状的圆球的
// 找到画布
var c1 = document.querySelector('#c1');
// 获取画笔，上下文对象
var ctx = c1.getContext('2d');
// 绘制图形(x,y,width，height)
let radiaGradient = ctx.createRadialGradient( 250, 150, 15,300, 200, 100);
radiaGradient.addColorStop(0, 'pink');
radiaGradient.addColorStop(1, 'red');
ctx.fillStyle = radiaGradient;
ctx.arc(300, 200, 100, 0, Math.PI * 2);
ctx.fill();
3d球效果
Original: https://blog.csdn.net/zhaochen1127/article/details/128498984
Author: Aic山鱼
Title: 使用Canvas实现封装路径，添加颜色，实现渐变，3d特效
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/811817/
转载文章受原作者版权保护。转载请注明原作者出处！