图形上下文的 clip 方法来实现图片的裁剪功能
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 图像裁剪 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- // 创建 canvas
- </canvas>
- <script>
- // 获取 canvas
- var canvas=document.getElementById("canvas");
- // 获取 canvas 的控制上下文
- var context=canvas.getContext("2d");
- // 绘制正方形 fillRect
- /*context.fillStyle="#ffff33";
- context.fillRect(100,200,300,300);*/
- // 绘制边框 strokeRect
- context.strokeStyle="#ffff33";
- context.strokeRect(0,0,500,500);
- // 渐变
- /* context.fillStyle=gradient1;
- context.fillRect(0,0,500,500);*/
- // 圆线性渐变 createLinearGradient
- /*context.beginPath();
- context.arc(250,250,200,0,Math.PI*2,true);
- context.fillStyle=gradient1;
- context.fill();
- context.closePath();*/
- // 径向渐变 createRadialGradient
- /*var gradient2=context.createRadialGradient(250,250,0,100,100,100);
- gradient2.addColorStop(0,"#eeee66");
- gradient2.addColorStop(0.4,"red");
- gradient2.addColorStop(1,"#ffffff");
- context.beginPath();
- context.fillStyle=gradient2;
- context.arc(250,250,200,0,Math.PI*2,true);
- context.fill();
- context.closePath();*/
- // 绘制图像 drawImage()
- /*var image=new Image();
- image.src="http://img1.gtimg.com/20/2055/205572/20557202_1200x1000_0.jpg";*/
- /*image.onload=function () {
- context.drawImage(image,150,100,200,300);
- }*/
- /*image.onload=function () {
- context.drawImage(image,0,0,200,300);
- context.drawImage(image,160,90,200,300,200,100,200,300);
- }*/
- // 图像平铺 pattern repeat
- /*image.onload=function () {
- var pattern=context.createPattern(image,"no-repeat");
- context.fillStyle=pattern;
- context.fillRect(0,0,500,500);
- }*/
- // 图像裁剪
- var image=new Image();
- image.onload=function () {
- drawImg(context,image);
- }
- image.src="http://pic.hunter-its.com/download/20170527_111530210.jpg";
- function drawImg(context,image) {
- createRodiusClip(context);
- context.drawImage(image,80,160,500,500,0,0,500,500);
- }
- function createRodiusClip(context) {
- context.beginPath();
- context.arc(250,250,250,0,Math.PI*2,true);
- context.fill();
- context.closePath();
- context.clip();
- }
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 裁剪 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- // 获取 canvas 的 id
- var canvas=document.getElementById("canvas");
- //canvas 的获取图形上下文 context
- var context=canvas.getContext("2d");
- // 填充 canvas 的边框大小
- var image=new Image();
- image.onload=function(){
- drawImg(context,image);
- // 绘制图像
- }
- image.src="http://p0.so.qhmsg.com/t0143f34941cb1804ff.jpg";
- // 绘制图像
- function drawImg(context,image){
- // 调用裁剪图形对象
- clipArc(context);
- context.drawImage(image, 170, 0,500,500,0,0,500,500);
- }
- // 绘制图形
- function clipArc(context){
- // 绘制路径
- context.beginPath();
- context.arc(250, 250, 250, 0, Math.PI*2, true);
- context.fill();
- context.closePath();
- context.clip();
- }
- </script>
- </body>
- </html>
五角星
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 裁剪 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- // 获取 canvas 的 id
- var canvas=document.getElementById("canvas");
- //canvas 的获取图形上下文 context
- var context=canvas.getContext("2d");
- // 填充 canvas 的边框大小
- // 绘制图像
- var img=new Image();
- img.src="http://p0.so.qhmsg.com/t0143f34941cb1804ff.jpg";
- img.onload=function(){
- drawImg(context,img);
- }
- function drawImg(context,image){
- create5Star(context);
- context.drawImage(image, 170, 0,500,500,0,0,500,500);
- }
- function create5Star(context){
- var dx= 250;
- var dy= 250;
- var s= 200;
- // 创建路径
- context.beginPath();
- var x=Math.sin(0);
- var y=Math.cos(0);
- var dig=Math.PI/5*4;
- for (var i=0;i<5;i++) {
- var x=Math.sin(i*dig);
- var y=Math.cos(i*dig);
- context.lineTo( dx + x * s,dy +y * s);
- }
- context.closePath();
- context.clip();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/a1955438892152e116f40e50fa4aa48d.html