canvas裁剪clip()函数的具体使用
程序员文章站
2024-02-08 16:44:10
这篇文章主要介绍了canvas裁剪clip()函数的具体使用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-03-01...
在canvas中，可以使用clip()函数裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉
未使用裁剪绘制一个圆
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
html, body{width:100%; height:100%; overflow:hidden; background-color:#afafaf;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getelementbyid('canvas'),
context = canvas.getcontext('2d');
canvas.width = document.body.clientwidth;
canvas.height = document.body.clientheight;
context.linewidth = 3;
context.strokestyle = 'red';
context.beginpath();
context.arc(200, 200, 100, (math.pi / 180) * 0, (math.pi / 180) * 360, false);
context.stroke();
context.closepath();
</script>
</body>
</html>
效果
使用clip()裁剪区域
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
html, body{width:100%; height:100%; overflow:hidden; background-color:#afafaf;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getelementbyid('canvas'),
context = canvas.getcontext('2d');
canvas.width = document.body.clientwidth;
canvas.height = document.body.clientheight;
context.linewidth = 3;
context.strokestyle = 'red';
context.rect(0, 0, 200, 200);
context.clip();
context.beginpath();
context.arc(200, 200, 100, (math.pi / 180) * 0, (math.pi / 180) * 360, false);
context.stroke();
context.closepath();
</script>
</body>
</html>
效果
也可以使用arc绘制圆形的剪裁区域
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
html, body{width:100%; height:100%; overflow:hidden; background-color:#afafaf;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getelementbyid('canvas'),
context = canvas.getcontext('2d');
canvas.width = document.body.clientwidth;
canvas.height = document.body.clientheight;
context.linewidth = 3;
context.strokestyle = 'red';
context.arc(100, 100, 150, (math.pi / 180) * 0, (math.pi / 180) * 360, false);
context.clip();
context.beginpath();
context.arc(200, 200, 100, (math.pi / 180) * 0, (math.pi / 180) * 360, false);
context.stroke();
context.closepath();
</script>
</body>
</html>
效果
使用save和restore实现只裁剪单个路径
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
html, body{width:100%; height:100%; overflow:hidden; background-color:#afafaf;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getelementbyid('canvas'),
context = canvas.getcontext('2d');
canvas.width = document.body.clientwidth;
canvas.height = document.body.clientheight;
context.linewidth = 3;
context.strokestyle = 'red';
context.save();
context.rect(0, 0, 200, 200);
context.clip();
context.beginpath();
context.arc(200, 200, 100, (math.pi / 180) * 0, (math.pi / 180) * 360, false);
context.stroke();
context.closepath();
context.restore();
context.beginpath();
context.arc(250, 250, 100, (math.pi / 180) * 0, (math.pi / 180) * 360, false);
context.stroke();
context.closepath();
</script>
</body>
</html>
效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。