Posts Tagged: canvas

HTML5 Canvas鼠标穿过PNG透明图-高亮选中图片

demo:点击查看 参考资料:点击查看 Canvas特效案例汇总展示: 服装DIY:http://www.loveqiao.com/dom/works/pcdiy/ 移动试衣间:http://www.loveqiao.com/dom/works/fitting/ Canvas图片合成:http://www.loveqiao.com/archives/53/ Canvas涂鸦画板:http://www.loveqiao.cn/dom/html5css3/canvas.html Canvas橡皮擦:http://www.loveqiao.com/dom/html5css3/canvas-erase…阅读全文

Html5 Canvas的putImageData问题

发现问题起因 最近在捣鼓html5画布那点功能,想做一个diyT恤的小程序,需求是这样的: 需要在T恤上的指定区域上diy图片或者文字,diy素材可以在指定区域拖动,超出diy区域会被截掉。 起初我是先创建了一个canvas1画布,在这个画布上面drawImage(imgdata) 然后传diy素材调整好位置 为了能使diy区域的素材能在指定大小范围内显示,我又创建了一个canvas2的画布,定义这个画布为diy区域的大小为约定的可diy区域大小,然后把canvas2上的diy数据先getImageData(0,0,200,260)然后putImageData(imgData)到canvas1…阅读全文

html5 canvas 圆形橡皮擦实现

之前做了个canvas涂鸦画板,没有增加橡皮擦工具,今天想起来后查了查资料想把这个功能补上,翻看手册文档里首先考虑是使用clearRect()方法来实现,实现过程中发现这个方法只能是矩形,不能实现圆形橡皮擦,于是在网上搜索一下发现大家都使用canvas的globalCompositeOperation 属性来实现,下面是属性的详细介绍: 实例 演示地址:橡皮擦、canvas涂鸦画板 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 属性。 注释:Internet Explor…阅读全文

html5获取图片指定坐标色值

利用html5 getImageData()方法获取canvas画布上指定坐标色值方法如下: 通过这个方法可以实现diy试衣间相同尺寸的png透明图片用定位叠加到一起后鼠标划过判断选择了哪个层,通过对应层级遍历每一张图片指定坐标处的色值来计算,先找到有色值的图片,就说明是当前选中的图片!下面是我在一个项目里用到这个方法的一段代码: 演示地址:demo

html5 canvas 实现图片合成

前段时间在公司做了个服装diy的项目,用到了html5 canvas的图片处理功能,项目的实现方法是先用3d建模,把渲染的服装拆分成碎片,在用js、jquery、html5等技术对服装的碎片组合成一张图片,下面是项目中用到html5canvas图片合成的一个小案例分享给大家 演示地址:demo