canvas笔记-clip裁剪函数的使用及探照灯实例

在canvas中有clip函数，也就是裁剪，从原始画布中剪切任意形状和尺寸。

如下例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);context.beginPath();context.strokeStyle = "green";context.arc(400, 400, 150, 0, Math.PI * 2);context.stroke();context.font = "bold 150px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "#058";context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);}</script></body>
</html>

程序运行截图如下：

添加clip代码后运行截图如下：

源码如下:

<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);context.beginPath();//context.strokeStyle = "green";context.arc(400, 400, 150, 0, Math.PI * 2);//context.stroke();context.clip();context.font = "bold 150px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "#058";context.fillText("CANVAS", canvas.width / 2, canvas.height / 2);}</script>

下面记录下探照灯的例子：

程序运行截图如下，那个探照灯的圆是会动的。

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>let searchLight = {x: 400,y: 400,radius: 150,vx: Math.random() * 5 + 10,vy: Math.random() * 5 + 10}window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");setInterval(function(){draw(context);update(canvas.width, canvas.height);}, 40)}function draw(cxt){let canvas = cxt.canvas;cxt.clearRect(0, 0, canvas.width, canvas.height);cxt.save();cxt.beginPath();cxt.fillStyle = "black";cxt.fillRect(0, 0, canvas.width, canvas.height);cxt.beginPath();cxt.arc(searchLight.x, searchLight.y, searchLight.radius, 0, Math.PI * 2);cxt.fillStyle = "#fff";cxt.fill();cxt.clip();cxt.font = "bold 150px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle";cxt.fillStyle = "#058";cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 4);cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 2);cxt.fillText("CANVAS", canvas.width / 2, canvas.height * 3 / 4);cxt.restore();}function update(canvasWidth, canvasHeight){searchLight.x += searchLight.vx;searchLight.y += searchLight.vy;if(searchLight.x - searchLight.radius <= 0){searchLight.vx = -searchLight.vx;searchLight.x = searchLight.radius;}if(searchLight.x + searchLight.radius >= canvasWidth){searchLight.vx = -searchLight.vx;searchLight.x = canvasWidth - searchLight.radius;}if(searchLight.y - searchLight.radius <= 0){searchLight.vy = -searchLight.vy;searchLight.y = searchLight.radius;}if(searchLight.y + searchLight.radius >= canvasHeight){searchLight.vy = -searchLight.vy;searchLight.y = canvasHeight - searchLight.radius;}}</script></body>
</html>

这里说明下实现的逻辑，碰撞检测，清空画布方面的不提了。

就提下这个draw。

这里是先绘制出了一个全黑的矩形，这个矩形和画布一样大。然后再绘制一个圆，这个圆是白色的，然后裁剪，这样的画，显示的时候就只会显示圆。然后就搞3个canvas字绘制到画布上。再加上运动效果，就变成探照灯实例了。

canvas笔记-clip裁剪函数的使用及探照灯实例相关推荐

绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo
对clip的理解: clip是对使用了该样式的元素进行裁剪显示.使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-t ...
python笔记2（函数面向对象文件编程上下文管理器）
记录python听课笔记文章目录记录python听课笔记一,函数 1.介绍python里的函数 2.用户自定义函数 3.变量的作用域 4.参数的传递 5.参数的默认值 6.向函数内部批量传递数据 ...
c++学习笔记内联函数，函数重载，默认参数
c++学习笔记内联函数,函数重载,默认参数 1 inline内联函数 C++中的const常量可以替代宏常数定义,如: const int A = 3;  #define A 3 C++中是否有解决 ...
HTML5 Canvas API 变换(translate函数)
下面我们来看下在canvas上绘制图像的另一种方式--变换(translate函数的应用): 下面的代码:我们还是实现上篇文章的效果:画一条斜线.理论上的知识,自己买书去看吧! <!DOCTYP ...
c语言中void arrout,c语言学习笔记(数组、函数
<c语言学习笔记(数组.函数>由会员分享,可在线阅读,更多相关<c语言学习笔记(数组.函数(53页珍藏版)>请在人人文库网上搜索. 1.数组2010-3-29 22:40一维数 ...
初学者python笔记（map()函数、reduce()函数、filter()函数、匿名函数）
文章目录一.匿名函数二.map()函数三.reduce()函数四.filter()函数五.三大函数总结本篇文章内容有Python中的匿名函数和map()函数.reduce()函数.filt ...
IOS学习笔记07---C语言函数-scanf函数
2013/8/7 IOS学习笔记07---C语言函数-scanf函数 ------------------------------ qq交流群:创梦技术交流群:251572072 ...
IOS学习笔记07---C语言函数-printf函数
IOS学习笔记07---C语言函数-printf函数 0 7.C语言5-printf函数 ------------------------- ----------------------------- ...
IOS学习笔记06---C语言函数
IOS学习笔记06---C语言函数 -------------------------------------------- qq交流群:创梦技术交流群:251572072 ...

canvas笔记-clip裁剪函数的使用及探照灯实例

canvas笔记-clip裁剪函数的使用及探照灯实例相关推荐

最新文章

热门文章