html5在线裁剪,HTML5 Canvas裁剪clip

裁剪(即clip())是渲染上下文中的绘制方法之一。很多人都以为这是一个清除概念，其实是错的。虽然从表现上看像清除，但是由于剪切区域由绘图路径设定，因此这是一个独立的显示区域。

在Canvas动画中，裁剪区域之外的动画不受影响，平时在处理图像时经常会遇到这种需求。与之类似的有一些算法，如脏矩阵算法等。

clip()方法通过计算所有的子路径来建立新的剪切区域，未闭合的子路径在填充区按照闭合方式填充，但并不影响实际的子路径集合，新的剪切区域将替换当前的剪切区域。剪切区域可以是任何可以绘制的轮廓形状。所以，裁剪路径其实就是绘图路径，只不过这个路径不是拿来绘图的，

而是设定显示区域和遮挡区域的一个分界线。如果你熟悉Flash的话，这有点类似于Flash的遮罩。

下面请看一个例子，代码如下：

setInterval(function(){

var mycanvas = document.getElementById('mycanvas');

var ctx=mycanvas.getContext('2d');

ctx.fillRect(0,0,500,500); //填充区的大小为500×500

ctx.save();

ctx.translate(250,250); //将当前坐标移动到(250, 250)位置上

ctx.beginPath(); //拟定路径

ctx.arc(0,0,200,0,Math.PI*2,true);//画出一个半径为200的圆

ctx.clip(); //裁剪上面的圆

//对裁剪区域进行加样式处理

var linearGradient = ctx.createLinearGradient(0,-300,0,250);//设定起始点

linearGradient.addColorStop(0, '#FF0000'); //渐变色0

linearGradient.addColorStop(1, '#004080'); //渐变色1

ctx.fillStyle = linearGradient;

ctx.fillRect(-250,0,500,500); //裁剪的重要一步，由于上面已经开始了tanslate，

//因此这里需要调整到-250

for(var j=1;j<250;j++){ //生成的粒子的密度

ctx.save();

ctx.fillStyle = '#FFFF00';

ctx.translate(250-Math.floor(Math.random()*500),

250-Math.floor(Math.random()*500));

drawParticl(ctx,Math.floor(Math.random()*10)); //粒子生成

ctx.restore();

}

ctx.restore();

},100);

function drawPartical(ctx,r){ //画粒子

ctx.save();

ctx.beginPath()

ctx.moveTo(r,0);

for(var i=0;i<10;i++){

ctx.rotate(Math.PI/Math.random()*20); //旋转图形，这是生成图形的关键

ctx.lineTo(r,0);

}

ctx.closePath();

ctx.fill();

ctx.restore();

}

html5在线裁剪,HTML5 Canvas裁剪clip相关推荐

html5 在线摄像头,HTML5在线摄像头使用
HTML5在线摄像头应用最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制.在线摄像头嘛,就那两种实现的方式:cab或者flash. 暂且不论本人从没学过的flash(事 ...
html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
html5 在线签名,html5手写签名
sxqm 清空生成图片 var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; ...
html5 在线白板,Html5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
html5在线俄罗斯方块,Html5原创俄罗斯方块（基于canvas）
第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久. 为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的俄罗斯方块. ...
html5在线学习系统,Canvas LMS 在线学习管理系统
账户设置自定义帮助链接和标志只有管理员可以修改哦 Help link text displays in the Global Navigation Menu, the footer of the ...
h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
html5+在线录音,html5在线录音示例源码(MediaStream Recording API)
[实例简介]微信端录音可用 [实例截图] [核心代码] // fork getUserMedia for multiple browser versions, for the future // ...
html5在线俄罗斯方块,HTML5最新经典俄罗斯方块游戏插件
这是一款最新的经典 HTML5 俄罗斯方块游戏插件.该插件使用html5和Blockrain.js来制作,它具有使用简单.响应式.可定制.速度快.有积分记录和自动游戏的特点. 基本使用方法可以使用任 ...
html5在线api,HTML5+ API Reference
Push模块管理推送消息功能,可以实现在线.离线的消息推送,通过plus.push可获取推送消息管理对象. 方法: 对象: ClientInfo: JSON对象,获取的客户端标识信息 PushMess ...

html5在线裁剪,HTML5 Canvas裁剪clip

html5在线裁剪,HTML5 Canvas裁剪clip相关推荐

最新文章

热门文章