本文摘自PHP中文网,作者小云云,侵删。
在canvas中,可以使用clip()函数裁剪区域,设定裁剪区域后,只有在区域内的图像才能显示,其余部分会被屏蔽掉。本文主要和大家介绍了canvas裁剪clip()函数的具体使用的相关资料,希望能帮助到大家。未使用裁剪绘制一个圆
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!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()裁剪区域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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>
|
效果
阅读剩余部分
相关阅读 >>
使用canvas轻松实现黑客帝国炫酷代码雨!!
html5 canvas的事件处理介绍
html5 canvas基本绘图之绘制线条
canvas实现二维码和图片合成的示例代码
html5 canvas绘制时指定颜色与透明度的方法
html5 canvas 图形组合是如何实现的?附代码
h5 canvas中fill 与stroke文字效果实现实例
html5 canvas平铺的代码详解
canvas中beginpath()和closepath()作用的实例解析
炫丽的倒计时效果canvas绘图与动画视频的资源推荐
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » canvas中使用clip()函数裁剪方法