This_Wei

Come on!

Raphael 快速开始

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Raphael 快速开始</title>
    <script src="raphael.min.js"></script>
</head>
<body>
<div id="view"></div>
<script>
    // 创建画布, 宽 300， 高 200
    const paper = Raphael('view', 300, 200);
    // 绘制圆形, 圆心坐标(150,100), 半径 50
    let circle = paper.circle(150, 100, 50);
    // 圆形填充为红色(red)
    circle.attr('fill', 'red');
    // 给圆形添加点击事件处理函数, 实现点击切换颜色
    circle.click(function (pointerEvent , x, y) {
        if (this.attr('fill') === 'red') {
            // 获取圆形填充属性值，值为 red 时，设置填充颜色为蓝色 blue
            this.attr('fill', 'blue');
        } else {
            // 否则设置填充颜色为红色 red
            this.attr('fill', 'red');
        }
    });
</script>
</body>
</html>

结果

0%