使用canvas画不规则图形

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


matrix,translate旋转,scale缩放,和拉伸。貌似具备了这几个条件我们的问题就可以得到解决了,但是前面我们说过,我们要求的是用不规则图形的斜切界面,transform固然好用,细细琢磨其实它只能满足一般的需求,就是对图形进行缩放和旋转固然是没什么问题,但是要图形做成不规则斜切这就是个麻烦的事情了,但是对于一般的只需做成平行四边形或者更简单的图形还是推荐使用transform的。所以综合考虑,还是选择使用canvas来解决我们的问题需求。话不多说了进入正题。

      canvas的强大对于使用过的人来说毋庸置疑,不仅可以实现各种动画和制作游戏,它的诞生对于开发人员来说简直就是惊喜。这里我只简单的介绍通过它来实现不规则图形或者斜切风格。

      贴出代码

 <!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
  <strong>这是原图</strong>
  <p>
   <img src="

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值