- 注册时间
- 2015-4-23
- 最后登录
- 2015-12-16
- 阅读权限
- 20
- 积分
- 60
- 精华
- 0
- 帖子
- 12
|
本帖最后由 lihuihero 于 2015-4-29 18:23 编辑
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>高级变形</title>
- </head>
- <style>
- body{
- margin:0;
- padding:0;
- }
-
- </style>
- <body>
- <div><img src="img/face.jpg" width="240" height="240"></div>
-
- <canvas id="myimg" width="800" height="800"></canvas>
- </body>
- <script>
- //save方法用于保存上下文环境，restore方法用于恢复到上一次保存的上下文环境。
- var c=document.getElementById("myimg");
- var ctx=c.getContext("2d");
- var img=new Image();
- img.src="img/face.jpg";
- img.onload=function(){
-
- ctx.save();
- ctx.beginPath();
- ctx.moveTo(0,0);
- ctx.lineTo(240,0);
- ctx.lineTo(0,240);
-
- ctx.closePath();
- ctx.clip();
-
- ctx.setTransform(240/240,0/240,0/240,240/240,0,0)
- ctx.drawImage(img,0,0);
- ctx.restore();
-
- ctx.save();
- ctx.beginPath();
- ctx.moveTo(240,0);
- ctx.lineTo(0,240);
- ctx.lineTo(240,240);
- ctx.closePath();
- ctx.clip();
- ctx.setTransform(240/240,(240-240)/240,(240-240)/240,(240-0)/240,0,240);
- ctx.drawImage(img,0,-240);
- ctx.restore();
- }
- </script>
- </html>
分成2个三角形 中间会有1像素的白线出现
我试着改了下 得把 下面花三角的代码该为 239 像素就不会出现问题了 但是上一个会多1像素 要改 drawImgData x为 -1
但是我总感觉不对 。LUFY大大 有什么好办法解决的
|
|
发表于 2015-4-29 18:21:41
分享
收藏
发表于 2015-5-7 10:38:49