Canvas系列(9):其他API
前面的内容讲了不少Canva的API,这章把剩下的API一讲吧。这个系列中以后基本不糊涉及新的API了,因为,这章完了我们就真的学完了!
阴影
Canvas中的阴影和CSS3中的阴影很像,通过本系列课程的学习,估计你已经发现了,CSS3的好多知识和Canvas是相通的。我们直接看一个例子:
// 阴影X偏移量 默认0
context.shadowOffsetX=5;
// 阴影Y偏移量 默认0
context.shadowOffsetY=5;
// 阴影颜色 默认透明
context.shadowColor='orange';
// 阴影模糊值 默认0
context.shadowBlur=5;
context.fillRect(10,10,50,50);
// 阴影不模糊
context.shadowBlur=0;
context.fillRect(80,10,50,50);
context.shadowBlur=5;
// 使用在描边上
context.strokeRect(150, 10, 50, 50);
context.font='bold 30px 微软雅黑';
context.shadowBlur=3;
// 使用在文字上
context.fillText("文字模糊", 10, 100);
效果如下:
由我们可以看到,阴影其实就是当前区域往左边偏移了一点,再往右边偏移了一点,然后给个颜色,给个模糊就可以了。当然偏移量可以是负值,表示方向,这个就不说了。同样由上我们可以知道阴影可以用在图形上也可以用在文字上,那么可以用在图片上吗?其实是不可以的,但是有方法可以,就是具有阴影地描边一个与图片大小位置全相同的矩形就可以了。
globalAlpha
globalAlpha
是设置全局的透明度,取值范围是0~1
,0表示透明,1表示不透明。我们之前没有设置所绘制的图形的透明度,但是都是不透明的,所以猜都能猜出来默认值是1。它的值可以是字符串类型,也可以数值类型,我们直接在上面代码中第十行中加入代码context.globalAlpha=0.5;
看到的效果如下:
可以看到globalAlpha
对它和它后面所绘制的图形是生效的,那么如何绘制完后恢复状态呢,还记得前面的内容吗?
globalCompositeOperation
globalCompositeOperation
描述了2个图形交叉的时候是什么样子,它的值有很多,这里就盗一张很经典的图:
我们这里就给一个值为xor(异或)
的例子吧:
context.globalCompositeOperation='xor';
context.fillStyle='orange';
context.fillRect(10,10,50,50);
context.fillStyle='blue';
context.fillRect(35,35,50,50);
效果如下:
clearRect
在路径与状态那一章我们使用clip来裁剪区域,与裁剪相似的还有一个clearRect用来清空区域,如下:
context.fillStyle='orange';
context.fillRect(10,10,50,50);
context.fillStyle='blue';
context.fillRect(35,35,50,50);
// 清空一个小区域
context.clearRect(60, 60, 25, 25);
效果如下:
clearRect
用的挺多的,通常做动画的时候使用它来清空整个屏幕,然后再重新绘制图案:
// 清空整个canvas
context.clearRect(0, 0, canvas.width, canvas.height);
toDataURL
与上面不同的是toDataURL
并不是context上的方法,而是canvas对象的方法,来看个例子:
context.fillStyle='orange';
context.fillRect(10,10,50,50);
context.fillStyle='blue';
context.fillRect(35,35,50,50);
var src = canvas.toDataURL("image/png");
var image = new Image();
image.src = src;
document.body.appendChild(image)
效果如下:
canvas.toDataURL
会转换为Base64格式的字符串,然后图片可以直接使用它,以显示出来。上面我们可以看到背景是不一样的,因为左侧的背景是我们通过CSS来设置的,而不是Canvas来绘制出来的。
至此,我们学完了Canvas几乎全部的API,恭喜你啊。此时,你又什么感想呢?是成就满满?还是感觉并没有学到些什么?如果你感觉成就满满,说明你是真的是学到了东西,如果还感觉没学到什么,也不要灰心,因为Canvas的学习并不仅仅是API,更多的是编程的一些技巧。好多时候我们学习编程其实学的只是一些语法和API而更多的经验还需要不断地在实践中去历练,往往一些编程技巧比语法和API要更重要,现在你学习的是HTML5中的Canvas,其实安卓、Java中的Swing、C++中的MFC(都是老技术了,新技术真心快学不懂了)等等绘制图片的技能都相差无几。我们后面的课程就会深入这些技能。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【5分钟玩转Lighthouse】搭建WordPress博客
- vue接入腾讯地图(一)【点击事件】
- Redis文件事件&时间事件处理机制
- Redis持久化策略
- Redis二进制安全的原理
- 面试必备 Vue 知识点
- 数据传输 | mysqldiff/mysqldbcompare 实现 DTLE 自动化测试
- CPU有个禁区,内核权限也无法进入!
- 分布式 | DBLE 3.20.07.0 来啦!
- C语言三剑客之《C陷阱与缺陷》一书精华提炼
- Linux进程间通信(上)之管道、消息队列实践
- FPGA上电时序
- 更新Kubernetes APIServer证书
- R语言连续时间马尔科夫链模拟案例 Markov Chains
- 如何用R语言在机器学习中建立集成模型?