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

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

学过数学，或者是比较了解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();

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

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

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

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

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

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

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();

    

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

再次提示一下，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();

   

如上图，第一张是效果图，第二张是原理图，曲线从起始点开始，下方有一个控制点，则曲线越陡，到第二个控制点与曲线的切线的点的位置，因为受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();

   

当然，三次贝塞尔曲线不知道能画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%);
}

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%);
}

方向可以用角度来定义，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%);
}

   渐变原点为中心，渐变颜色为百分百之间的颜色渐变

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

.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%);
}

  原点左下，渐变形状为椭圆

.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%);
}

    原点左下，渐变形状为圆形

以上只是简单列举一下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)‘);

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

照理说，应该是先创建一个图像，然后给这个图形加渐变色，一般的规律都如此，比如画画，比如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);

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

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

图可能画的有点蒙啊，解释一下，第一张图表示我们上面的代码显示的效果，渐变方向是（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);

        

可以看出角度是正确的，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);

可以看到，如果图形即使不是一个正方形，径向渐变的圆依然是正圆，与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);

比对上面的图可以看出，下图在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);

效果跟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);

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

咦，什么鬼，算了，如果想要正常的径向渐变，还是同圆心吧，不同圆心太诡异，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);

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

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);

可以看到，第一个没有变透明，后面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();

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

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();

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

为了解决这个问题，我们需要引入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();

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

回到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);

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

时间： 2024-12-28 01:49:54

canvas API ，通俗的canvas基础知识（三）的相关文章

20_Shell语言———VIM编辑器基础知识三之窗口属性定制、配置文件及查找替换功能

Vim编辑器可以让用户按照需求来定制一些使用属性. 一.窗口属性定义 1)显示行号 行号不是内容,只是用来帮助用户确认文本所在的行.在vim编辑器中,如果要显示行号,可以在末行模式下输入: set number 如果想关闭,则可以在功能名称前面加上no,即: set nonumber 命令可以被简写,如set number 可以简写为 set nu:set nonumber 可以简写为 set nonu. 注意,上述设定仅对当前vim的进程有效,一旦当前进程关闭,这些设定就会失效,如果要使设定永

计算机科学基础知识(三)静态库和静态链接

三.将relocatable object file静态链接成可执行文件 将relocatable object file链接成可执行文件分成两步,第一步是符号分析(symbol resolution),第二步是符号重新定位(Relocation).本章主要描述这两个过程,为了完整性,静态库的概念也会在本章提及. 1.为什么会提出静态库的概念? 程序逻辑有共同的需求,例如数学库.字符串库等,如果每个程序员在撰写这些代码逻辑的时候都需要自己重新写那么该是多么麻烦的事情,而且容易出错,如果有现成的,

Dapper基础知识三

在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. Dapper,当项目在开发的时候,在没有必要使用依赖注入的时候,如何做到对项目的快速开发这里对Dapper做一个小的进阶. 结合上一篇的博客,就可以使用了. public class Demo { public string name { get; set; } public string DapperTest { get; set; } } public class

【基础知识三】线性模型

一.基本形式 通过属性的线性组合来进行预测, 许多非线性模型可以在线性模型的基础上,引入层级结构或高维映射而得. 二.线性回归 最小二乘法:求解ω和b: 多元线性回归:样本由多个属性描述,即x为多维向量: 若矩阵不满秩产生多个解,解决方法:引入正则化项: 三.对数/逻辑线性回归 广义线性模型: g(.)条件:连续且充分光滑(单调可微) 为了预测值连续,引入Sigmoid函数 得到, 极大似然估计:求解ω和b 四.线性判别分析LDA 也叫"Fisher判别" 将样例投影到一条直线上,使同

KnockoutJS基础知识(三)

对于knockoutJS来讲,模板绑定和Mapping插件绑定是十分重要的功能,虽然模板绑定在我工作中用的及其少,但模板绑定的重要性不可忽视,在其他前端框架中,如Angular.Vue等等,模板存在的意义十分重要,Mapping插件使得我们能够脱离手工绑定,及其方便我们快速绑定达到预期效果. KnockoutJS模型绑定更多用法:https://knockoutjs.com/documentation/template-binding.html 本文地址:https://www.cnblogs.

3. K线基础知识三

1. 阴线 证券市场上指开盘价高于收盘价的K线,K线图上一般用淡蓝色标注,表示股价下跌,当收盘价低于开盘价,也就是股价走势呈下降趋势时,我们称这种形态的K线为阴线. 中间部分实体为蓝色,此时,上影线的长度表示最高价和开盘价之间的价差.实体的长短代表开盘价比收盘价高出的幅度.下影线的长度则有收盘价和最高价之间的价差大小所决定. 2. 小阴星 小阴星的分时走势图与小阳星相似,只是收盘价格略低于开盘价格.表明行情疲软,发展方向不明. 3. 小阴线 表示空方呈打压态势,但力度不大. 4. 光脚阴线 光脚

Linux基础知识三

1.列出当前系统上所有已经登录的用户的用户名,注意:同一个用户登录多次,则只显示一次即可. 查看系统用户的命令为: (1)getent passwd 查看系统上的所有用户信息 (2)w 查看登录用户正在使用的进程信息,该命令所使用的信息来源于/var/run/utmp文件 w命令输出的信息包括: -用户名称 -用户的机器名称或tty号 -远程主机地址 -用户登录系统的时间 -空闲时间(作用不大) -附加到tty(终端)的进程所用的时间(JCPU时间) -当前进程所用时间(PCPU时间) -用户当

cocos2d0基础知识三个音符

1.触摸屏事件: bool HelloWorld::init() { //省略的代码的最后位 this->schedule(schedule_selector(HelloWorld::usecreatesprite),2);//定时器 this->setTouchEnabled(true);/CCLayer是能够对应点击对象的,默认情况是没开启的,我们通过this->setTouchEnabled(true)来设置是否接受触摸事件. return true; } void HelloWo

SQL Server基础知识三十三问 (15-21)

15. 存储过程可以调用自己么, 或者说可能有递归的存储过程么? SP nesting最多可以到多少层? 答: 可以的. 因为Transact-SQL 支持递归, 你可以编写可以调用自己的存储过程. 敌对可以被定义为一种解决问题的方法, 其中问题的解决是通过不断的对问题的子集调用自己而达成的. 当一个存储过程调用另一个存储过程或执行CLR的routine, type, 或aggregate时, 就会形成嵌套(nest). 你最多可以嵌套存储过程或托管代码的层级为32层.   16. 什么是log

Struts2基础知识(三)

本文主要包括以下内容 OGNL表达式 标签 防止表单重复提交 使用第三方插件 OGNL表达式 OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目.Struts2框架使用OGNL作为默认的表达式语言. 相对EL表达式,它提供了平时我们需要的一些功能,如: 支持对象方法调用,如xxx.sayHello(); 支持类静态方法调用和值访问,表达式的格式为@[类全名(包括包路径)]@[方法名|值名],例如:@[email protect