HTML5之canvas剪切图片

有时UI设计效果图，设定图片某个角不可见，但上传的图片又不全是PNG透明图，那么Canvas就能帮忙解决困扰啦，自己根据需求做的一个实例，实现这样的效果，以下贴代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="max-age=0" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>canvas剪切图片</title>
<style>
@media screen and (min-width:320px) and (max-width:359px){html{font-size:12px;}body{ font-size:1.2rem;}}
@media screen and (min-width:360px) and (max-width:374px){html{font-size:13.5px;}}
@media screen and (min-width:375px) and (max-width:383px){html{font-size:14.07px;}}
@media screen and (min-width:384px) and (max-width:392px){html{font-size:14.38px;}}
@media screen and (min-width:393px) and (max-width:410px){html{font-size:14.75px;}}
@media screen and (min-width:411px) and (max-width:413px){html{font-size:15.41px;}}
@media screen and (min-width:414px) and (max-width:479px){html{font-size:15.52px;}}
@media screen and (min-width:480px) and (max-width:511px){html{font-size:18px;}}
@media screen and (min-width:512px) and (max-width:639px){html{font-size:19.19px;}}
@media screen and (min-width:640px){html{font-size:24px;}}
*{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ min-width:320px; max-width:640px; margin:0 auto;}
body{ background-color:#f0f0f0; font-family:"STHeitiSC-Light","微软雅黑","Microsoft YaHei"; color:#666; line-height:1rem;}
a:link , a:visited , a:hover ,a:active{ text-decoration:none; color:#666;}
.hide{ display:none;}
.mask.show{ -webkit-animation:fadein .3s; animation:fadein .3s;}
@-webkit-keyframes fadein
{
0%   {opacity:0;}
100% {opacity:.75;}
}
@keyframes fadein
{
0%   {opacity:0;}
100% {opacity:.75;}
}
.mask.hide , .link_picture.hide{ -webkit-animation:fadeout .3s; animation:fadeout .3s;}
@-webkit-keyframes fadeout
{
0%   {opacity:.75;}
100% {opacity:0;}
}
@keyframes fadeout
{
0%   {opacity:.75;}
100% {opacity:0;}
}
.link_picture.show{-webkit-animation:popout .5s;}
@-webkit-keyframes popout{0%{ -webkit-transform:scale(0.9,0.9); opacity:0;}30%{-webkit-transform:scale(1.05,1.05);opacity:1;}60%{-webkit-transform:scale(0.95,0.95);opacity:1;}100%{-webkit-transform:scale(1,1);opacity:1;}
}
@keyframes popout{0%{ transform:scale(0.9,0.9); opacity:0;}30%{transform:scale(1.05,1.05);opacity:1;}60%{transform:scale(0.95,0.95);opacity:1;}100%{transform:scale(1,1);opacity:1;}
}
.mask{ width:100%; height:100%; background:rgba(0,0,0,0.7); position:fixed; left:0; top:0; z-index:4;}/*盒子*/
.link_picture{ width:23.65rem; height:25rem; position:fixed; top:10%; left:50%; margin-left:-11.8rem; z-index:5;}
/*显示的图片*/
.link_picture_img{ display:block; width:23.2rem; height:22.3rem; position:absolute; top:-0.3rem; left:0;}
/*盖在上面的图*/
.link_picture_top{ width:23.65rem; height:25rem; position:absolute; left:0; top:0;}
/*文字*/
.link_text{ width:100%; height:3rem; line-height:3rem; box-sizing:border-box; padding:0 1rem; white-space:nowrap; overflow:hidden; position:absolute; left:0; bottom:0;}
/*关闭*/
.link_picture_colse{ display:block; width:2rem; height:2rem; cursor:pointer; position:absolute; right:0; top:0; z-index:6;}</style>
</head><body>
<div class="mask"></div>
<div class="link_picture show"><canvas id="picture" class="link_picture_img"></canvas><img class="link_picture_top" src="link_picture_top.png" /><div class="link_text">放松心情喜悦出发</div><div class="link_picture_colse"></div>
</div>
<script type="text/javascript">
window.onload = function(){//var picture_c     = document.getElementById("picture");var ctx_picture = picture_c.getContext("2d");//页面背景图片img = new Image();                img.src = "demo.jpg";//随便给一张图片测试就行img.onload = function() {var iw = img.width;var ih = img.height;//设置canvas的宽等于图片宽，这样移动端（比例显示）的图片就能全部显示picture_c.width = iw;picture_c.height = ih;//载入图片//ctx_picture.rect(0,0,iw-50,ih);//ctx_picture.stroke();//开始一个新的绘制路径ctx_picture.beginPath();//设置线条颜色为蓝色//ctx_picture.strokeStyle = "rgba(0,0,0,0)";//设置路径起点坐标ctx_picture.moveTo(0, 0);//绘制直线线段到坐标点(60, 50)ctx_picture.lineTo(0, ih);ctx_picture.lineTo(iw, ih); //ctx_picture.lineTo(iw, 30);ctx_picture.lineTo(iw, ih*0.1831775700934579);//ctx_picture.lineTo(iw - 37, 0); ctx_picture.lineTo(iw*0.8617594254937163, 0); //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。ctx_picture.closePath();//最后，按照绘制路径画出直线//ctx_picture.stroke();//剪切ctx_picture.clip();ctx_picture.drawImage(img,0,0,iw,ih,0,0,iw,ih);//ctx_picture.setAntiAlias(true);}
};
</script>
</body>
</html>

用到的边框图片

HTML5之canvas剪切图片相关推荐

php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
html5在图片中加链接,JavaScript、html5、canvas实现图片上画超链接
本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1. html 2. javascrip ...
手机端剪切图片插件 php,html5移动端上传图片裁剪插件
特效描述:html5移动端上传图片裁剪插件.html5移动端图片裁剪.支持缩放. 代码结构 1. 引入JS 2. HTML代码选择图片使用 window.addEventListener(&q ...
利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常
有两张图片,如下图所示,如何将两张图片合并成一张? 使用HTML5的canvas相关知识可以简单快捷地解决此需求. 目录结构: 源码使用原生js,不需要引入第三方库: <!DOCTYPE htm ...
解决Html5用canvas绘制不出来图片的问题
转载自解决Html5用canvas绘制不出来图片的问题如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...

HTML5之canvas剪切图片

HTML5之canvas剪切图片相关推荐

最新文章

热门文章