图像裁剪示例

Posted 2022-07-11 yanyanstyle

概念：

 

我们在使用Canvas绘制图像时，我们经常会想要只保留图像的一部分，这时我们可以使用Canvas API自带的图像裁剪功能来实现这一想法。此功能是指，在画布内使用路径，只绘制该路径所包括区域内的图像，不绘制路径外的图像。

使用图像上下文对象的不带参数的clip方法来实现Canvas元素的图像裁剪功能。

下面，我们来应用一番，在应用中，把画布背景绘制完成后，调用creat5StartClip函数，在函数中，创建一个五角星的路径，然后使用clip方法设置裁剪区域。具体的执行流程为先装载图像，然后调用drawImg函数，在该函数中调用creat5StarClip创建路径，设置裁剪区域，然后绘制经过裁剪后的图像

——最终可以绘制出一个五角星范围内的图像！

 

应用：

核心代码

function draw(id)
var canvas=document.getElementById("id");
if(canvas==null)
return false;
var context=canvas.getContext("2d");
var gr = context.createLinearGradient(0,400,300,0);
gr.addColorStop(0,‘rgb(255,255,0)‘);
gr.addColorStop(1,‘rgb(0,255,255)‘);
contxt.fillStyle = gr;
contxt.fillRect(0,0,400,300);
image=new Image();
image.onload = function()
drawImg(context,img);
;
image.src = "image/Tulips.jpg";


function drawImg(context,image)
creat5StarClip(context);
context.drawImage(image,-50,-150,300,300);

function creat5StarClip(context)
var n = 0;
var dx = 100;
var dy = 0;
var s = 150;
context.beginPath();
context.translate(100,150);
var x = Math.sin(0);
var x = Math.cos(0);
var dig = Math.Pi/5*4;
for(var i = 0;i<5;i++)

var x = Math.sin(i*dig);
var x = Math.cos(i*dig);
comtext.lineTo(dx+x*s,dy+y*s);

context.clip();