Rapheal JS 画个小人玩

最新推荐文章于 2024-08-08 10:33:11 发布

jastar

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量2.3k

点赞数 1

分类专栏： JS & JQuery 文章标签： function path stylesheet html border float

本文链接：https://blog.csdn.net/jastar/article/details/7880647

版权

这篇博客展示了如何利用Raphaël JS库创建一个可拖动和调整的小人图形。通过定义不同的路径和圆来构建小人的各个部分，如头、手臂和腿，并实现了点击改变颜色的功能。用户可以拖动控制点来改变小人的形状，实现了一种简单的2D人物动画效果。

摘要由CSDN通过智能技术生成



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="curver_files/demo.css" type="text/css" media="screen">
        <link rel="stylesheet" href="curver_files/demo-print.css" type="text/css" media="print">
        <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            window.onload = function () {
                var frontRap = Raphael("front", 200, 300);
                
                drawFrontStick(frontRap);
                
            };
            
            function drawFrontStick(rap) {
            	rap.circle(100, 40, 20)
        		.attr("fill", "#000")
        		.attr("stroke", "#fff")
        		.attr("stroke-width", 2)
        		.click(function(){			
        			this.attr("fill", "#fff");
        			painLevel = 10;
        		});
            	
            	cirttr = {fill: "#fff", stroke: "none"};
            	lineattr = {stroke: "#fff" || Raphael.getColor(), "stroke-width": 2, "stroke-linecap": "round"};
            	
            	var path0 = "M80 40L100 40L120 40"; // 耳鼻眼
            	var path1 = "M60 70LL100 70L140 70"; // 肩膀
            	var path2 = "M140 70L140 130"; //右臂
            	var path3 = "M100 40L100 140"; //颈脊椎
            	var path4 = "M60 210L60 175L60 140L140 140L140 175L140 210"; // 髋关节, 腿
				var path5 = "M40 210L60 210L80 210"; //左脚
            	var path6 = "M120 210L140 210L160 210"; // 右脚 
            	
            	frontPaths = rap.set(
	            	rap.path(path0).attr(lineattr),
	            	rap.path(path1).attr(lineattr),
	            	rap.path(path2).attr(lineattr),
	            	rap.path(path3).attr(lineattr),
	            	rap.path(path4).attr(lineattr),
	            	rap.path(path5).attr(lineattr),
	            	rap.path(path6).attr(lineattr)
            	);
            	
            	frontControls = rap.set(
           			rap.circle(80, 40, 6).attr(cirttr), // 左耳
                   	rap.circle(100, 40, 4).attr(cirttr), // 鼻
                   	rap.circle(120, 40, 4).attr(cirttr), // 右耳

最低0.47元/天解锁文章

jastar

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Rapheal JS 画个小人玩

window.onload = function () { var frontRap = Raphael("front", 200, 300); drawFrontStick(frontRap); };
复制链接

扫一扫

专栏目录