canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式-阿里云开发者社区

渐变

 线性渐变

在一条直线上进行渐变

调用createLinearGradient()方法创建一个linearGradient对象

var gnt = cxt.createLinearGradient(x1, y1, x2, y2);

x1、y1表示渐变色开始点的坐标
x2、y2表示渐变色结束点的坐标

添加渐变（开始）

gnt.addColorStop(value1,color1);

value1 渐变开始的位置，取值 0~1
color1 渐变开始的颜色

添加渐变（结束）

gnt.addColorStop(value2,color2);

value2 渐变结束的位置，取值 0~1
color2 渐变结束的颜色

第2和第3步可以反复多次添加多个渐变，每次渐变都以上一个渐变的结束位置为开始位置

填充渐变

cxt.fillStyle = gnt; 
cxt.fill();

             var gnt = cxt.createLinearGradient(0,150, 200, 150);
             gnt.addColorStop(0, "HotPink");
             gnt.addColorStop(1, "white");
             cxt.fillStyle = gnt;
             cxt.fillRect(0, 0, 200, 150);

             var text = "绿叶学习网";
             cxt.font = "bold 50px 微软雅黑";

             var gnt = cxt.createLinearGradient(0, 75, 200, 75);
             gnt.addColorStop(0, "HotPink");
             gnt.addColorStop(1, "LightSkyBlue");

             cxt.fillStyle = gnt;
             cxt.fillText(text, 10, 90);

径向渐变（用得少）

径向渐变，是一种从起点到终点、颜色从内到外进行的圆形渐变（从中间向外拉，像圆一样）。径向渐变是圆形渐变或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。

调用createLinearGradient()方法创建一个radialGradient对象

var gnt = cxt.createRadialGradient(x1,y1,r1,x2,y2,r2);

(x1,y1)表示渐变开始圆心的坐标，r1表示渐变开始圆心的半径。
(x2,y2)表示渐变结束圆心的坐标，r2表示渐变结束圆的半径。

当起点圆与终点圆的圆心坐标相同时，会有一种圆形渐变的效果

添加渐变（开始）

gnt.addColorStop(value1,color1);

value1 渐变开始的位置，取值 0~1
color1 渐变开始的颜色

添加渐变（结束）

gnt.addColorStop(value2,color2);

value2 渐变结束的位置，取值 0~1
color2 渐变结束的颜色

第2和第3步可以反复多次添加多个渐变，每次渐变都以上一个渐变的结束位置为开始位置

填充渐变

cxt.fillStyle = gnt; 
cxt.fill();

fill()可以改为fillRect()或fillText()。其中fillRect()表示矩形渐变，fillText()表示文字渐变。

             //画圆
             cxt.beginPath();
             cxt.arc(80, 80, 50, 0, Math.PI * 2, true);
             cxt.closePath();
             //渐变
             var gnt = cxt.createRadialGradient(100, 60, 10, 80, 80, 50);
             gnt.addColorStop(0, "white");
             gnt.addColorStop(0.9, "orange");
             gnt.addColorStop(1, "rgba(0,0,0,0)");
             //填充
             cxt.fillStyle = gnt;
             cxt.fill();

             gradient = cxt.createRadialGradient(60, 60, 0, 60, 60, 60);
             gradient.addColorStop("0", "magenta");
             gradient.addColorStop("0.25", "blue");
             gradient.addColorStop("0.50", "green");
             gradient.addColorStop("0.75", "yellow");
             gradient.addColorStop("1.0", "HotPink");
             cxt.fillStyle = gradient;
             cxt.fillRect(0, 0, 120, 120);

             var i = 0;
             setInterval(function () {
                  gradient = cxt.createRadialGradient(60, 60, 0, 60, 60, 60);
                  gradient.addColorStop(i * 0, "magenta");
                  gradient.addColorStop(i * 0.25, "blue");
                  gradient.addColorStop(i * 0.50, "green");
                  gradient.addColorStop(i * 0.75, "yellow");
                  gradient.addColorStop(i * 1.0, "HotPink");
                  cxt.fillStyle = gradient;

                  i = i + 0.1;
                  if (i >= 1) { //超过颜色点值后，自动归0
                        i = 0;
                  }
                  cxt.fillRect(0, 0, 120, 120);
             }, 50);

阴影

属性	说明
shadowOffsetX	阴影与图形的水平距离，默认值为0。大于0时向右偏移，小于0时向左偏移

shadowOffsetY	阴影与图形的垂直距离，默认值为0。大于0时向下偏移，小于0时向上偏移
shadowColor	阴影的颜色，默认值为黑色
shadowBlur	阴影的模糊值，默认值为0。该值越大，模糊度越强；该值越小，模糊度越弱

Canvas阴影属性使用的也是W3C坐标系，y 轴向下

             //设置左上方向的阴影
             cxt.shadowOffsetX = -5;
             cxt.shadowOffsetY = -5;
             cxt.shadowColor = "LightSkyBlue ";
             cxt.shadowBlur = 1;
             cxt.fillStyle = "HotPink";
             cxt.fillRect(30, 30, 50, 50);

             //设置右下方向的阴影
             cxt.shadowOffsetX = 5;
             cxt.shadowOffsetY = 5;
             cxt.shadowColor = "LightSkyBlue ";
             cxt.shadowBlur = 10;
             cxt.fillStyle = "HotPink";
             cxt.fillRect(100, 30, 50, 50);

             //定义文字
             var text = "绿叶学习网";
             cxt.font = "bold 60px 微软雅黑";

             //定义阴影
             cxt.shadowOffsetX = 5;
             cxt.shadowOffsetY = 5;
             cxt.shadowColor = "LightSkyBlue ";
             cxt.shadowBlur = 10;

             //填充文字
             cxt.fillStyle = "HotPink";
             cxt.fillText(text, 10, 90);

             //创建image对象
             var image = new Image();
             image.src = "images/princess.png";

             image.onload = function () {
                 //定义阴影
                 cxt.shadowOffsetX = 5;
                 cxt.shadowOffsetY = 5;
                 cxt.shadowColor = "HotPink";
                 cxt.shadowBlur = 10;
                 cxt.fillRect(40, 15, 120, 120);

                 cxt.drawImage(image, 40, 15);
             }

四个方向的阴影效果，只需要shadowOffsetX和shadowOffsetY这两个属性的值都定义为0就可以了。

             //创建image对象
             var image = new Image();
             image.src = "images/princess.png";

             image.onload = function () {
                 //定义阴影
                 cxt.shadowOffsetX = 0;
                 cxt.shadowOffsetY = 0;
                 cxt.shadowColor = "HotPink";
                 cxt.shadowBlur = 10;
                 cxt.fillRect(40, 15, 120, 120);

                 cxt.drawImage(image, 40, 15);
             }

路径

方法	说明
beginPath()	开始一条新的路径
closePath()	关闭当前路径
isPointInPath()	判断某一个点是否存在于当前路径内

beginPath()

cxt.beginPath();

用于开始一个新路径（同时也是结束上一个路径），刚开始绘图时，其实都默认执行了一次 beginPath() 开始了一个新路径，直到再次遇到 beginPath() 才会结束默认创建的路径，而开始一段新路径。

Canvas基于“状态”绘制图形。每一次绘制（stroke()或fill()），Canvas会检测整个程序定义的所有状态，这些状态包括strokeStyle、fillStyle、lineWidth等。当一个状态值没有被改变时，Canvas就一直使用最初的值，当一个状态值被改变时，需要分两种情况考虑。

（1）如果使用beginPath()开始一个新的路径，则不同路径使用不同的值。

（2）如果没有使用beginPath()开始一个新的路径，则后面的值会覆盖前面的值（后来者居上原则）。

             cxt.lineWidth = 5;

             //第1条直线
             cxt.moveTo(50, 40);
             cxt.lineTo(150, 40);
             cxt.strokeStyle = "red";
             cxt.stroke();

             //第2条直线
             cxt.moveTo(50, 80);
             cxt.lineTo(150, 80);
             cxt.strokeStyle = "green";
             cxt.stroke();

             //第3条直线
             cxt.moveTo(50, 120);
             cxt.lineTo(150, 120);
             cxt.strokeStyle = "blue";
             cxt.stroke();

三条直线都属于同一个路径，所以cxt.strokeStyle=‘green’;会覆盖cxt.strokeStyle=‘red’;，然后cxt.strokeStyle=‘blue’;会覆盖cxt.strokeStyle=‘green’;。因此strokeStyle属性最终取值为blue，即三条直线都是blue。

             cxt.lineWidth = 5;

             //第1条直线
             cxt.beginPath();
             cxt.moveTo(50, 40);
             cxt.lineTo(150, 40);
             cxt.strokeStyle = "red";
             cxt.stroke();

             //第2条直线
             cxt.beginPath();
             cxt.moveTo(50, 80);
             cxt.lineTo(150, 80);
             cxt.strokeStyle = "green";
             cxt.stroke();

             //第3条直线
             cxt.beginPath();
             cxt.moveTo(50, 120);
             cxt.lineTo(150, 120);
             cxt.strokeStyle = "blue";
             cxt.stroke();

使用beginPath()后，三条直线将位于不同的路径中。因此，不同路径中定义的状态不会像上一个例子那样发生覆盖。

判断是否属于同一路径的标准是：是否使用了beginPath()，而不是视觉上是否有首尾连线。

Canvas中的绘制方法如stroke()、fill()等，都是以“之前最近的beginPath()”后面所有定义的状态为基础进行绘制的。

closePath()

cxt.closePath();

用于关闭路径，即将同一个路径的起点与终点连接起来，使其成为一个封闭的图形。

常用于绘制多边形的最后一步。

如果Canvas只有一条线段的话，那么closePath()方法就什么都不做。

             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
             cxt.stroke();
             cxt.closePath();

             cxt.lineWidth = 10;
             cxt.strokeStyle = "HotPink";

             cxt.moveTo(40, 60);
             cxt.lineTo(100, 60);
             cxt.lineTo(100, 30);
             cxt.lineTo(150, 75);
             cxt.lineTo(100, 120);
             cxt.lineTo(100, 90);
             cxt.lineTo(40, 90);
             cxt.lineTo(40, 60);
             cxt.stroke();

将lineWidth定义得足够大（10px）时，如果使用lineTo()方法来关闭图形，会有一个如图所示的“缺口”小问题。有两种方法可以解决：

定义lineCap属性值为square。
在stroke()方法之前使用closePath()关闭图形（推荐）

isPointInPath()

cxt.isPointInPath(x , y);

用于判断点 x,y 是否在当前路径中，若在返回true,否则返回false，仅对 rect()方法有效，对 strokeRect() 和 fillRect() 无效。

             cxt.strokeStyle = "HotPink";
             cxt.rect(50, 50, 80, 80);
             cxt.stroke();
             if (cxt.isPointInPath(100, 50)) {
                   alert("点(100,100)存在于当前路径中");
             }

             cxt.moveTo(50, 50);
             cxt.lineTo(150, 50);
             cxt.stroke();
             if (cxt.isPointInPath(100, 50)) {
                   alert("点(50,100)存在于当前路径中");
             }

上面代码只在IE浏览器中运行中有效果，但是在Google浏览器和Firefox中不会弹出对话框。实际上，当我们想要使用isPointInPath()方法判断某个点是否位于一条直线上时，在Goole和Firefox浏览器中都是无法实现的。不过可以使用isPointInPath()方法判断某个点是否位于一个图形（如矩形、圆形等）上面。

状态

Canvas基于“状态”来绘制图形。每一次绘制（stroke()或fill()），Canvas会检测整个程序定义的所有状态，这些状态包括strokeStyle、fillStyle、lineWidth等。当一个状态值没有被改变时，Canvas就会一直使用最初的值。当一个状态值被改变时，分两种情况考虑：

（1）如果使用beginPath()开始一个新的路径，则不同路径使用不同的值。

（2）如果没有使用beginPath()开始一个新的路径，则后面的值会覆盖前面的值（后来者居上原则）。

状态的保存和恢复

Canvas提供了两个操作状态的方法：

save() 保存“当前状态”，如剪切状态、变换状态和绘图状态（各种绘图样式属性），不能保存路径状态（开始新的路径，只有beginPath()一个方法），也不能保存图形（Canvas只有当前一个上下文环境，如果想要恢复图形，就只能清空画布再重绘。）。

restore() 恢复“之前保存的状态”。

save()和restore()一般情况下都是成对配合使用，使用场景如下：

（1）图形或图片裁切。

（2）图形或图片变换。

（3）以下属性改变的时候：fillStyle、font、globalAlpha、globalCompositeOperation、lineCap、lineJoin、lineWidth、miterLimit、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY、strokeStyle、textAlign、textBaseline。

应用一：清除剪切区域

 创建剪切区域 clip()

创建剪切区域后，绘制的图形都只限于这个剪切区域之内，超出剪切区域的部分不会显示（被剪切掉了）。

把整个画布（Canvas）看成一个房子，clip()方法的剪切区域则可以看成一扇窗户。即使房子再大，最终透过窗户所能看到的空间也就只有窗户这么大。

cxt.clip();

绘制一个基本图形
调用 clip() 创建一个剪切区域

clip()方法也不支持Canvas自带的两个方法：strokeRect()、fillRect()。如果要使用strokeRect()和fillRect()，请使用rect()方法来代替。

             //绘制一个"描边圆"，圆心为（50，50），半径为40
             cxt.beginPath();
             cxt.arc(50, 50, 40, 0, 360 * Math.PI / 180, true);
             cxt.closePath();
             cxt.strokeStyle = "HotPink";
             cxt.stroke();

             //使用clip()，使得"描边圆"成为一个剪切区域
             cxt.clip();

             //绘制一个"填充矩形"
             cxt.beginPath();
             cxt.fillStyle = "#66CCFF";
             cxt.fillRect(50, 50, 100, 80);

若注释掉 cxt.clip();

清除剪切区域

在图形或者图片剪切（clip()）之前使用save()方法来保持当前状态，然后在剪切（clip()）之后使用restore()方法恢复之前保存的状态。

如果不使用save()和restore()，即便使用clearRect()方法清空画布，后面绘制的所有图形或图片也都会限制在这个剪切区域内。

             //save()保存状态
             cxt.save();
             //使用clip()方法指定一个圆形的剪切区域
             cxt.beginPath();
             cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true);
             cxt.closePath();
             cxt.stroke();
             cxt.clip();
             //绘制一张图片
             var image = new Image();
             image.src = "images/princess.png";
             image.onload = function () {
                 cxt.drawImage(image, 10, 20);
             }
             $$("btn").onclick = function () {
                 //restore()恢复状态
                 cxt.restore();
                 //清空画布
                 cxt.clearRect(0, 0, cnv.width, cnv.height);
                 //绘制一张新图片
                 var image = new Image();
                 image.src = "images/Judy.png";
                 image.onload = function () {
                     cxt.drawImage(image, 10, 20);
                 }
             }

删除 cxt.save()和cxt.restore() 后效果为：

应用二：图片/图形的变换

             cxt.fillStyle = "HotPink";
             cxt.translate(30, 30);
             cxt.fillRect(0, 0, 100, 50);

             cxt.fillStyle = "LightSkyBlue ";
             cxt.translate(60, 60);
             cxt.fillRect(0, 0, 100, 50);

蓝色矩形预期坐标为（60,60），最终效果却是（90,90），因为之前 translate(30, 30)，整个坐标系的原点已经发生了位移变化 !

解决方案是使用 save()和restore()来实现

             cxt.save();
             cxt.fillStyle = "HotPink";
             cxt.translate(30, 30);
             cxt.fillRect(0, 0, 100, 50);
             cxt.restore();

             cxt.fillStyle = "LightSkyBlue ";
             cxt.translate(60, 60);
             cxt.fillRect(0, 0, 100, 50);

在变换操作（平移、缩放、旋转）中，一般都是在操作之前使用save()方法保存当前状态，其中当前状态包括参考坐标、图形大小等。然后再使用restore()方法来恢复之前保存的状态。

Canvas对象

 属性

globalAlpha 透明度
默认值为1.0（完全不透明），取值范围为：0.0～1.0。其中0.0表示完全透明，1.0表示完全不透明。globalAlpha属性必须在图形绘制之前定义才有效。
width 宽度
height 高度

常用于文字水平居中对齐和清空画布

cxt.clearRect(0, 0, cnv.width, cnv.height);

方法

getContext(“2d”) 获取Canvas 2D上下文环境对象
toDataURL() 获取Canvas对象产生的位图的字符串，即将Canvas画布转换为图片的base64格式的字符串。

cnv.toDataURL(type);

type 可选，默认值为image/png类型

直接在Canvas画布上点击鼠标右键，在弹出的快捷菜单中也能“另存为”图片为本地图片，为什么还要那么麻烦地使用toDataURL()呢？

事实上，很多旧版本的浏览器并不具备这个功能。因此为了兼容性，建议使用toDataURL()方法进行处理。

canvas保存图片时，谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL

https://blog.csdn.net/weixin_41192489/article/details/124386704

图形的重叠模式

默认情况下，后绘制的图形会覆盖之前绘制的图形。

通过 globalCompositeOperation 可以修改重叠模式

cxt.globalCompositeOperation = 属性值;

不同属性值，效果如下图：

属性值	说明
source-over	默认值，新图形覆盖旧图形
copy	只显示新图形，旧图形作透明处理
darker	两种图形都显示，在重叠部分，颜色由两个图形的颜色值相减后形成

destination-atop	只显示新图形与旧图形重叠部分以及新图形的其余部分，其他部分作透明处理
destination-in	只显示旧图形中与新图形重叠部分，其他部分作透明处理
destination-out	只显示旧图形中与新图形不重叠部分，其他部分作透明处理

destination-over	与source-over属性相反，旧图形覆盖新图形
lighter	两种图形都显示，在图形重叠部分，颜色由两个图形的颜色值相加后形成
source-atop	只显示旧与新图形重叠部分及旧图形的其余部分，其他部分作透明处理

source-in	只显示新图形中与旧图形重叠部分，其他部分作透明处理
source-out	只显示新图形中与旧图形不重叠部分，其余部分作透明处理
xor	两种图形都绘制，其中重叠部分透明处理

             cxt.globalCompositeOperation = "xor";

             //绘制矩形
             cxt.fillStyle = "HotPink";
             cxt.fillRect(30, 30, 60, 60);
             //绘制圆形
             cxt.beginPath();
             cxt.arc(100, 100, 40, 0, Math.PI * 2, true);
             cxt.closePath();
             cxt.fillStyle = "LightSkyBlue";
             cxt.fill();

             cxt.globalCompositeOperation = "xor";

             //绘制第1个矩形
             cxt.fillStyle = "HotPink";
             cxt.fillRect(30, 30, 60, 60);
             //绘制圆形
             cxt.beginPath();
             cxt.arc(100, 100, 40, 0, Math.PI * 2, true);
             cxt.closePath();
             cxt.fillStyle = "LightSkyBlue";
             cxt.fill();
             //绘制第2个矩形
             cxt.fillStyle = "HotPink";
             cxt.fillRect(110, 30, 60, 60);

canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式

渐变

线性渐变

径向渐变（用得少）

阴影

路径

beginPath()

closePath()

isPointInPath()

状态

状态的保存和恢复

应用一：清除剪切区域

创建剪切区域 clip()

清除剪切区域

应用二：图片/图形的变换

Canvas对象

属性

方法

图形的重叠模式

热门文章

最新文章

相关电子书