Canvas斜切快速实现

文章目录

使用篇
这样就轻松实现了斜切风格了，ok问题解决。需求实现。

使用篇

最近做项目遇到一个需求，首页界面采取斜切风格，开始拿到这个问题的时候考虑过几种方案。一是用svg来解决不规则图形的问题，但是貌似这种东西对于我们来说属于嵌入式开发了比较麻烦，二是用CSS3提供的新属性方法transform来解决问题，transform提供了三种操作元素的属性。

matrix，translate旋转，scale缩放，和拉伸。貌似具备了这几个条件我们的问题就可以得到解决了，但是前面我们说过，我们要求的是用不规则图形的斜切界面，transform固然好用，细细琢磨其实它只能满足一般的需求，就是对图形进行缩放和旋转固然是没什么问题，但是要图形做成不规则斜切这就是个麻烦的事情了，但是对于一般的只需做成平行四边形或者更简单的图形还是推荐使用transform的。所以综合考虑，还是选择使用canvas来解决我们的问题需求。话不多说了进入正题。
canvas的强大对于使用过的人来说毋庸置疑，不仅可以实现各种动画和制作游戏，它的诞生对于开发人员来说简直就是惊喜。这里我只简单的介绍通过它来实现不规则图形或者斜切风格。

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <strong>这是原图</strong>
  <p>
   <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"
    width="256" height="191">
  </p>
  <div>
   <strong>这是Canvas斜切实现</strong>
  </div>
  
  <!-- 注明当不支持canvas的浏览器 -->
  <canvas id="canvas" width="256" height="191">您的浏览器不支持canvas标签。</canvas>
 </body>
 <script type="text/javascript">
    //初始化一个Image对象
      var canvasImage=new Image();
      //赋值图片地址
      canvasImage.src = "http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg";
      //获取Canvas对象(画布)
    var canvas = document.getElementById("canvas");
    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
    if(canvas.getContext){  
        //获取对应的CanvasRenderingContext2D对象(画笔)
        var ctx = canvas.getContext("2d");  
        
        var drawimage = function(canvasImage) {
           //保存画布当前状态
           ctx.save();
           //开始一个新的绘制路径
            ctx.beginPath();
            //设置线条颜色为蓝色
            ctx.strokeStyle = "red";
            //设置路径起点坐标
            ctx.moveTo(0, 0);
            ctx.lineTo(0, 180);
            ctx.lineTo(230, 191);
            ctx.lineTo(256, 100);
            //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
            ctx.closePath();
          ctx.clip();
          ctx.drawImage(canvasImage, 0, 0,256,191);
         ctx.restore();
        };
        //必须图片加载完后在进行绘图
       canvasImage.onload = function() {
        drawimage(this);
       };
        
    }
  </script>
  </html>

使用篇

这样就轻松实现了斜切风格了 ，ok问题解决。需求实现。

这样就轻松实现了斜切风格了，ok问题解决。需求实现。