井井客

搜索

svg练习画了一个熊猫

很久之前就想用SVG来画个小动物了,最近受到某个文章的影响,终于决定不再懒下去了,自己开始动手画起来。因为有canvas的点点基础,所以对着文档,画的还是很666的。

svg练习画了一个熊猫

效是图就是上面的熊猫啦,然后啥也不说先上代码吧:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>svg练习画了一个熊猫</title>
    <style>
    	html,body,div { padding: 0; margin: 0; border: 0; }
    	html { background: #7cde86; }
    	svg { display: block; margin: 100px auto 0; }
    </style>
</head>
<body>
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<!-- 黑色身体 -->
	<path d="M160 140 Q110 190 145 195 Q163 298 196 246 Q198 246 200 246 Q247 300 236 180 Z" fill="black" />
	<!-- 白色身体 -->
	<path d="M160 144 Q120 210 192 240 Q195 241 198 240 Q263 215 228 139 Z" fill="white" stroke="black" stroke-width="3"/>
	<!-- 黑手小手 -->
	<path d="M215 150 C240 168 220 196 240 200 C256 197 267 163 227 138" fill="black" />
	<!-- 黑色耳朵 -->
	<circle cx="160" cy="70" r="18"  fill="black" />
	<circle cx="240" cy="70" r="18"  fill="black" />
	<!-- 白色头主体 -->
    <circle cx="200" cy="108" r="54" stroke="black" stroke-width="2" fill="white"/>
    <!-- 黑色眼框 -->
    <ellipse cx="175" cy="100" rx="14" ry="18" fill='black' />
    <ellipse cx="225" cy="100" rx="14" ry="18" fill='black' />
    <!-- 白色眼框 -->
    <circle cx="175" cy="105" r="5"  fill="white" />
    <circle cx="225" cy="105" r="5"  fill="white" />
    <!-- 鼻子 -->
    <ellipse cx="200" cy="130" rx="12" ry="5" fill='black' />
    <!-- 嘴唇 -->
    <path d="M200 130 Q202 145 190 140" fill="none" stroke="black" stroke-width="1.2" />
    <path d="M200 130 Q198 145 210 140" fill="none" stroke="black" stroke-width="1.2"	/>
</svg>
</body>
</html>

可以复制代码出来运行看看,里面每一个部件都有注释,所以很容易看得懂,另外贴一张从其它网站拿来的图,里面把svg基本形状的api展示出来了。

svg练习画了一个熊猫相关api

另外我是对着w3school文档开始画的,链接http://www.w3school.com.cn/html5/html_5_svg.asp,里面api的介绍稍微比这张图要详细一丢丢。

最后需要注意的就是画曲线了,网上有这方面比较高大上的讲解,具体的可以搜索看看。(我自己对Ps钢笔工具贝塞尔曲线用的还算6,画的时候有时候凭感觉就能找到大致的点再进行微调就可以了,其实这个多练习几次应该就会很有感觉的了)

文章TAG:HTML5

作者:井井客原创来源:原创
本文标题:svg练习画了一个熊猫
本文链接:/c/11284.html

上一篇:JS冒泡、插入、选择排序的算法像不像一家?
下一篇:原生JS实现拖动拼图验证

文章分类

相关阅读

随便看看