纯CSS&Canvas画哆啦A梦
2016-07-05 16:15
351 查看
前段时间看到有人用纯CSS画大白,当时觉得很神奇。最近有空了解了一下,其实就是简单的div加上border-radius,transform,把div变成所需的各种形状再定位拼接,其实没有什么高深的技术。但是还是试着做了个小demo,大家都画大白,我就画个别的,最后选了哆啦A梦。
最后的结论是,这种方式可以画一些简单的图,但是基本上没什么意义,也就是闲的蛋疼作为练习,熟悉一下定位和css属性。
刚好前段时间学了Canvas,正愁没地方练习。于是两种方法各画了一只哆啦A梦,也好有个比较。Canvas的画图是使用JavaScript,如果是画多个图形,可以将复用的部分写成函数来调用,但是哆啦A梦中只有圆形复用的比较多,而Canvas也已经有了自带的方法。所以这里是直接一笔一划写出来的。我觉得应该有更好的方法,但是目前还没有想到该怎么优化。
总的来说还是蛮有趣的,我画画很难看,但是这样画的来的哆啦A梦还是蛮可爱的。已经把他俩放在网上了,可以点击纯CSS3&Canvas画哆啦A梦这里来看效果。
最后的结论是,这种方式可以画一些简单的图,但是基本上没什么意义,也就是闲的蛋疼作为练习,熟悉一下定位和css属性。
刚好前段时间学了Canvas,正愁没地方练习。于是两种方法各画了一只哆啦A梦,也好有个比较。Canvas的画图是使用JavaScript,如果是画多个图形,可以将复用的部分写成函数来调用,但是哆啦A梦中只有圆形复用的比较多,而Canvas也已经有了自带的方法。所以这里是直接一笔一划写出来的。我觉得应该有更好的方法,但是目前还没有想到该怎么优化。
总的来说还是蛮有趣的,我画画很难看,但是这样画的来的哆啦A梦还是蛮可爱的。已经把他俩放在网上了,可以点击纯CSS3&Canvas画哆啦A梦这里来看效果。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- [css] line-height 百分比单位和数值单位的区别
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 设计更快的网页(三):字体和 CSS 调整