canvas中使用clip()函数裁剪方法

　　未使用裁剪绘制一个圆

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　*{margin:0;padding:0;}

　　html,body{width:100%;height:100%;overflow:hidden;background-color:#AFAFAF;}

　　</style>

　　</head>

　　<body>

　　<canvasid="canvas"></canvas>

　　varcanvas=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()裁剪区域

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　*{margin:0;padding:0;}

　　html,body{width:100%;height:100%;overflow:hidden;background-color:#AFAFAF;}

　　</style>

　　</head>

　　<body>

　　<canvasid="canvas"></canvas>

　　varcanvas=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绘制圆形的剪裁区域

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　*{margin:0;padding:0;}

　　html,body{width:100%;height:100%;overflow:hidden;background-color:#AFAFAF;}

　　</style>

　　</head>

　　<body>

　　<canvasid="canvas"></canvas>

　　varcanvas=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实现只裁剪单个路径

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　*{margin:0;padding:0;}

　　html,body{width:100%;height:100%;overflow:hidden;background-color:#AFAFAF;}

　　</style>

　　</head>

　　<body>

　　<canvasid="canvas"></canvas>

　　varcanvas=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>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55200.shtml