masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > canvas API ，通俗的canvas基础知识（三）

canvas API ，通俗的canvas基础知识（三）

黄舟
Lepaskan： 2017-03-16 13:45:17
asal
1556 orang telah melayarinya

全文说到了三角形，圆形等相关图形的画法，不熟悉的同学可以出门右转，先看看前文，接下来继续我们的图形——曲线。

学过数学，或者是比较了解js 的同学都知道贝塞尔曲线，当然，在数学里面，这是一门高深的学问，js里面的贝塞尔曲线一般是用来做动画的，其实别的地方也有体现，比如说Photoshop里面的钢笔工具，CorelDraw里面的贝塞尔工具等等，canvas中，也是有体现的

当然，如果是单纯的画一条曲线，也可以用前面的方法：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    
ctx.arc(100,100,100,0,90*Math.PI/180,false);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(103,103);
ctx.arcTo(183,83,162,182,40);
ctx.stroke();
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

如果要画一个弯弯曲曲的线条就费劲了，这才有下面的主角登场：

quadraticCurveTo(cpx,cpy,x,y) 二次贝塞尔曲线

参数：cpx,cpy 表示第一个控制点，x,y 表示结束点

加上起点，就是3个点控制一条曲线，其实这个跟arcTo的用法差不多，不同的地方就是arcTo是需要指定圆弧的半径的，因为它是2条线中画一个圆与直线的切点形成的曲线，那这个二次贝塞尔曲线的画图原理是什么呢？咱们一起来画一画：

canvas API ，通俗的canvas基础知识（三）

二次贝塞尔曲线的大致规律：从起始点出发，曲线越靠近控制点，曲线越陡，然后慢慢远离控制点，曲线随即越来越平缓，直到结束点，并且此曲线会与起始点和结束点相切

这个控制点是不是有点像一个磁铁一样，吸引着这条曲线的运动，俗话说耳闻不如一见，咱们试一下：

ctx.moveTo(50,50);
ctx.lineTo(70,120);
ctx.lineTo(200,80);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,50);
ctx.quadraticCurveTo(70,120,200,80);
ctx.stroke();
Salin selepas log masuk


canvas API ，通俗的canvas基础知识（三）

canvas API ，通俗的canvas基础知识（三）

看看，是不是这样的，当然，曲线弯曲的程度是多少是有公式的，但是我们不需要关心，只需要记住一点就够了：曲线靠近控制点，曲线越陡，远离控制点，曲线越平，哦了！

再次提示一下，arcTo与quadraticCurveTo的区别，现在是否明白？

现在我们来介绍一下三次贝塞尔曲线：

bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y) 三次贝塞尔曲线

参数：cpx1,cpy1表示第一个控制点，cpx2,cpy2表示第二个控制点 x,y表示结束点

包括起始点一起4个点来决定一条曲线，这个跟二次贝塞尔曲线的原理是一样一样的，只是多一个控制点，其精髓还是那句话：曲线靠近控制点，曲线越陡，远离控制点，曲线越平

先来一个简单的例子吧（来个U形）：

ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

canvas API ，通俗的canvas基础知识（三）

如上图，第一张是效果图，第二张是原理图，曲线从起始点开始，下方有一个控制点，则曲线越陡，到第二个控制点与曲线的切线的点的位置，因为受2个控制点的影响，曲线开始慢慢变平缓，因为2控制点刚好对称，所以到中间点，曲线出于水平，然后继续受2个控制点的作用，其中第二个控制点的作用越来越大，知道第一个控制点与曲线的切线点位置，曲线继续受到第二个控制点的作用，反向受力，到结束点，额，听不懂，好吧，不懂就不懂吧，记住那句总结性的话就行了！

其经典例子莫过于正弦图（用2个贝塞尔曲线，一个正U一个反U）：

ctx.beginPath();
ctx.moveTo(20,150);
ctx.bezierCurveTo(20,50,150,50,150,150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150,150);
ctx.bezierCurveTo(150,250,280,250,280,150);
ctx.stroke();
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

canvas API ，通俗的canvas基础知识（三）

当然，三次贝塞尔曲线不知道能画U形图，而是任意曲线都能画，只有你想不到，没有画不了的，哈哈，脑洞打大一下吧！



都说作画作画的，不能老是做水墨画啊，我喜欢颜色，五彩缤纷的颜色，恩，canvas也是可以的，canvas和css3一样都可以设置渐变，这样一来，看到彩虹是不是就不远了，嘻嘻

我们先看看css3的渐变是怎么设置的，然后对比一下canvas的渐变，我们都知道渐变分为线性渐变和径向渐变，我们一一来比较：

线性渐变：

.box1{
    width:500px;
    height:50px;
    background: -webkit-linear-gradient(left, red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

css3可以指定颜色，支持各种颜色格式，且可以指定颜色所在位置，不仅如此，css3还可以指定渐变的方向：

.box1{
    width:500px;
    height:50px;
    background: -webkit-linear-gradient(45deg , red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

方向可以用角度来定义，45度角是从左下到右上进行渐变

径向渐变：

.box2{
    width:300px;
    height:200px;
    background:-webkit-radial-gradient(red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）
渐变原点为中心，渐变颜色为百分百之间的颜色渐变

可以看出，径向渐变是以中心为原点，一圈一圈向外扩散，同样支持自定义颜色，支持各种颜色格式，支持指定位置，也是可以设置原点和渐变方式（圆形，椭圆）：

.box2{
    width:300px;
    height:200px;
    background:-webkit-radial-gradient(bottom left, ellipse,red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）
原点左下，渐变形状为椭圆

.box2{
    width:300px;
    height:200px;
    background:-webkit-radial-gradient(bottom left, circle,red 0%, #0F0 20%,rgb(51,102,255) 50%, rgba(204,255,0,0.8) 100%);
}
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）
原点左下，渐变形状为圆形

以上只是简单列举一下css3的渐变样式，当然css3的渐变肯定不止这些，这里主要是想对比一下canvas的渐变样式，顺便科普一下！

canvas的渐变相对要简单一些，没有那么多的花花肠子：

createLinearGradient(x1,y1,x2,y2) 创建线性渐变

参数：x1,y1 表示渐变起始点 x2,y2 表示渐变结束点

createRadialGradient(x1,y1,r1,x2,y2,r2) 创建径向渐变

参数：x1,y1 表示渐变开始圆心坐标，r1表示渐变开始圆的半径 x2,y2 表示渐变结束圆心坐标，r2表示渐变结束圆的半径

gradient.addColorStop(stop,color) 规定gradient 对象中的颜色和位置

参数： stop 取值0-1之间，表示渐变中开始与结束之间的位置 color表示渐变颜色

注意，这里添加渐变颜色的对象并不是context，而是gradient

怎么用呢？看线性渐变一个小例子：

这个科普一个误区：

ctx.fillRect(50,50,200,50);
var line = ctx.createLinearGradient(50,50,200,50);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
Salin selepas log masuk





这样是错误的，什么都出不来！

照理说，应该是先创建一个图像，然后给这个图形加渐变色，一般的规律都如此，比如画画，比如css，但是canvas不一样，重点来了：canvas凡是设置样式的，必须放在绘图前面 ，怎么理解这句话？

绘图的方法： fill() , fillRect() , stroke() , strokeRect() , rect()

那设置：比如文字类字体，字体大小，字体颜色，字体阴影，渐变色 路径类如线条，矩形，圆形，背景，渐变等等

所以正确的格式是：

var line = ctx.createLinearGradient(50,50,200,50);
        line.addColorStop(0,'red');
        line.addColorStop(0.2 ,'#0F0');
        line.addColorStop(0.5 ,'rgb(51,102,255)');
        line.addColorStop(1 ,'rgba(204,255,0,0.8)');
        
        ctx.fillStyle = line;
        ctx.fillRect(50,50,200,50);
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

可以看到canvas一样可以自定义颜色，支持各种颜色格式，支持指定位置（用0-1的数，跟百分比类似），相比css3之下，我觉得canvas的渐变颜色区域更加准确！

好了，既然canvas能像css3一样设置渐变样式，那可不可以设置方向呢？怎么设？以上面的代码为例，我们画一张图：

canvas API ，通俗的canvas基础知识（三）

图可能画的有点蒙啊，解释一下，第一张图表示我们上面的代码显示的效果，渐变方向是（50,50）——> （200,50），是一条水平线，表示方向是从左到右渐变，要是我将坐标方向设为（50,50）——> （200,100），如第二张图，那么渐变是否是从左上角到右下角呢？我们试一下：

var line = ctx.createLinearGradient(50,50,200,100);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
        
ctx.fillStyle = line;
ctx.fillRect(50,50,200,50);
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

canvas API ，通俗的canvas基础知识（三）

可以看出角度是正确的，createLinearGradient的2个坐标就是为了指明渐变方向的，那么canvas的径向渐变会不会跟css3相同呢？我们写一个小例子：

var line = ctx.createRadialGradient(150,150,0,150,150,200);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
        
ctx.fillStyle = line;
ctx.fillRect(50,50,200,150);
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

可以看到，如果图形即使不是一个正方形，径向渐变的圆依然是正圆，与css3的渐变机制有点不一样（css3是椭圆，看上面的css3图），并且渐变区域是根据两个圆来决定的，我们改一下这2个圆的区域看看：

var line = ctx.createRadialGradient(150,150,50,150,150,100);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
        
ctx.fillStyle = line;
ctx.fillRect(50,50,200,150);
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

比对上面的图可以看出，下图在50-100的区间里是有渐变的，其他地方则是首尾的颜色填充，那么圆心在边角上呢？

var line = ctx.createRadialGradient(50,50,0,50,50,200);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
        
ctx.fillStyle = line;
ctx.fillRect(50,50,200,150);
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

效果跟css3的样式一样，颜色更加准确，如果2圆的圆心不一样，会有什么反应？

var line = ctx.createRadialGradient(50,50,0,150,150,200);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
        
ctx.fillStyle = line;
ctx.fillRect(50,50,200,150);
Salin selepas log masuk


一个圆心在左上角，一个圆心在中间

canvas API ，通俗的canvas基础知识（三）

咦，什么鬼，算了，如果想要正常的径向渐变，还是同圆心吧，不同圆心太诡异，hold 不住啊！

那径向渐变能像css3一样可以设置椭圆吗？咳咳，我只能借用一句台词：臣妾做不到啊！

我们来一个炫酷的渐变应用：

ctx.font = "40px 微软雅黑";
var line = ctx.createLinearGradient(10,100,200,100);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
ctx.fillStyle = line;
ctx.fillText("狂拽炫酷吊炸天",10,100);
Salin selepas log masuk


canvas API ，通俗的canvas基础知识（三）

下面我们介绍另外一个与颜色有关的属性——透明！

globalAlpha = num 参数：num取值0-1之间 设置或返回绘图的当前透明值

有同学会问，按这个词的意思是全局透明，那么它是全局的吗？我也想问，那我们试一下：

ctx.fillStyle = "red";
ctx.fillRect(50,50,100,100);
ctx.globalAlpha = 0.5;
ctx.fillStyle = "green";
ctx.fillRect(100,100,100,100);
ctx.fillStyle = "blue";
ctx.fillRect(150,150,100,100);
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

可以看到，第一个没有变透明，后面2个变透明了，那么如果我将路径闭合，是否还会出现这样的效果：

ctx.beginPath();
ctx.fillStyle = "red";
ctx.fillRect(50,50,100,100);
ctx.closePath();
        
ctx.globalAlpha = 0.5;
        
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(100,100,100,100);
ctx.closePath();
        
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(150,150,100,100);
ctx.closePath();
Salin selepas log masuk


canvas API ，通俗的canvas基础知识（三）

结果是一样的，说明它是”人“如其名啊，果然是全局的，那么将它放入闭合路径中，会污染其他的路径吗？

ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.fillStyle = "red";
ctx.fillRect(50,50,100,100);
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(100,100,100,100);
ctx.closePath();
        
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(150,150,100,100);
ctx.closePath();
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

马蛋，简直是严重的核污染啊，穿透力如此之强？如果我只想让第一个透明，后面的不透明？我要怎么弄呢？

为了解决这个问题，我们需要引入2个方法，同样是一对活宝啊：

context.save() 保存当前环境的状态

context.restore() 返回之前保存过的路径状态和属性

怎么理解这对活宝呢？

可以这么理解：当设置了save()方法，就相当于将后面的绘图放在一个堆栈中，与世隔绝，知道看到restore()，就返回到原来的位置，举个例子哈，就像是一堆糖果，save()就是将一部分糖果装进盒子，restore()就是封闭盒子，继续捡糖果，但是盒子里的糖果就不会与其他糖果混合了，恩，可以这么理解，特别注意的是，restore()方法必须要有save()才起作用，你想啊，都没有盒子装糖果，怎么能封闭盒子呢

那咱们来看看他们的神奇技能：

ctx.save();
ctx.beginPath();
ctx.globalAlpha = 0.5;
ctx.fillStyle = "red";
ctx.fillRect(50,50,100,100);
ctx.closePath();
ctx.restore();

ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(100,100,100,100);
ctx.closePath();
        
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(150,150,100,100);
ctx.closePath();
Salin selepas log masuk



canvas API ，通俗的canvas基础知识（三）

哎呀，瞬间觉得整个世界都完美了！在面对凶悍的全局变量，属性或方法时，我们可以用上面的这对活宝来避免它们对我们需要的部分的侵害（这里为什么要说侵害，会让人想污的），确实是好技能！

回到globalAlpha，它的用处还是有很多的，路径，图形，文字都可以设置透明，那我们来一个文字透明看看：

ctx.font = "40px 微软雅黑";
var line = ctx.createLinearGradient(10,100,200,100);
line.addColorStop(0,'red');
line.addColorStop(0.2 ,'#0F0');
line.addColorStop(0.5 ,'rgb(51,102,255)');
line.addColorStop(1 ,'rgba(204,255,0,0.8)');
ctx.fillStyle = line;
ctx.globalAlpha = 0.3;
ctx.fillText("狂拽炫酷吊炸天",10,100);
Salin selepas log masuk


canvas API ，通俗的canvas基础知识（三）

恩，今天就介绍到这里吧，后面的内容比较复杂，需要认真的准备，就这样吧！

 以上就是canvas API ，通俗的canvas基础知识（三） 的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！


相关文章：

canvas API 介绍，常见的canvas基础知识（一）

canvas API 介绍，常见的canvas基础知识（二）

canvas API 介绍，常见的canvas基础知识（四）

Label berkaitan：
canvas， API
sumber：php.cn
Artikel sebelumnya：canvas API ，通俗的canvas基础知识（二） Artikel seterusnya：canvas API ，通俗的canvas基础知识（四）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Masalah mendapatkan statistik tertentu (Statistik) daripada PokeAPI menggunakan Axios dan Node.js Saya mempunyai masalah, saya cuba menggunakan PokemonAPI, tetapi apabila saya cuba mengaks...
daripada 2024-04-06 18:46:35
0
1
464
API berfungsi pada posmen tetapi enggan menyambung dalam Flutter postRequest()async{Map\<String,dynamic\>map={'email':'[email protected]','password':...
daripada 2024-04-06 14:08:33
0
1
340
Perintah pelaksanaan fungsi penjadualan VueJS menyebabkan masalah Saya cuba memaparkan senarai pengumuman (diambil daripada API) pada halaman. Saya mengguna...
daripada 2024-04-06 10:37:58
0
1
385
Nuxt 3 tidak akan dipaparkan dalam SSR Jadi saya telah menghadapi masalah di mana saya cuba mendapatkan pembolehubah persekitaran...
daripada 2024-04-05 15:04:40
0
1
3642
Tolak objek ke tatasusunan, API boleh gubah Ada projek. Terdapat dua pilihan pilihan "saiz" (besar, kecil) dan kuantiti (2/4...
daripada 2024-04-05 14:41:47
0
1
1526
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan