码迷,mamicode.com
首页 > 其他好文 > 详细

图像裁剪示例

时间:2019-08-13 22:55:34      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:draw   i++   元素   on()   rgb   begin   translate   路径   art   

概念:

 

我们在使用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();
}

图像裁剪示例

标签:draw   i++   元素   on()   rgb   begin   translate   路径   art   

原文地址:https://www.cnblogs.com/yanyanstyle/p/11348937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!