首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Canvas系列(9):其他API

Canvas系列(9):其他API

作者头像
kai666666
发布2020-10-19 14:44:08
4710
发布2020-10-19 14:44:08
举报
文章被收录于专栏:橙光笔记橙光笔记

前面的内容讲了不少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
globalAlpha

可以看到globalAlpha对它和它后面所绘制的图形是生效的,那么如何绘制完后恢复状态呢,还记得前面的内容吗?

globalCompositeOperation

globalCompositeOperation描述了2个图形交叉的时候是什么样子,它的值有很多,这里就盗一张很经典的图:

globalCompositeOperation取值
globalCompositeOperation取值

我们这里就给一个值为xor(异或)的例子吧:

context.globalCompositeOperation='xor';

context.fillStyle='orange';
context.fillRect(10,10,50,50);

context.fillStyle='blue';
context.fillRect(35,35,50,50);

效果如下

xor
xor

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)

效果如下

toDataURL
toDataURL

canvas.toDataURL会转换为Base64格式的字符串,然后图片可以直接使用它,以显示出来。上面我们可以看到背景是不一样的,因为左侧的背景是我们通过CSS来设置的,而不是Canvas来绘制出来的。


至此,我们学完了Canvas几乎全部的API,恭喜你啊。此时,你又什么感想呢?是成就满满?还是感觉并没有学到些什么?如果你感觉成就满满,说明你是真的是学到了东西,如果还感觉没学到什么,也不要灰心,因为Canvas的学习并不仅仅是API,更多的是编程的一些技巧。好多时候我们学习编程其实学的只是一些语法和API而更多的经验还需要不断地在实践中去历练,往往一些编程技巧比语法和API要更重要,现在你学习的是HTML5中的Canvas,其实安卓、Java中的Swing、C++中的MFC(都是老技术了,新技术真心快学不懂了)等等绘制图片的技能都相差无几。我们后面的课程就会深入这些技能。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-06-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 阴影
  • globalAlpha
  • globalCompositeOperation
  • clearRect
  • toDataURL
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档