HTML学习笔记-最基础HTML标签-Canvas的使用（六）

最新推荐文章于 2024-07-12 20:49:16 发布

若数

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量186

点赞数 1

分类专栏：零基础入门web前端文章标签： html css canvas svg 前端

本文链接：https://blog.csdn.net/Karven_/article/details/89136712

版权

零基础入门web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

详细学习链接

<!DOCTYPE html>
<html>

<body>
    <!DOCTYPE HTML>
    <html>

    <head>
        <style type="text/css">
            body {
                font-size: 70%;
                font-family: verdana, helvetica, arial, sans-serif;
            }
        </style>

        <script type="text/javascript">
            function cnvs_getCoordinates(e) {
                x = e.clientX;
                y = e.clientY;
                document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
            }

            function cnvs_clearCoordinates() {
                document.getElementById("xycoordinates").innerHTML = "";
            }
        </script>
    </head>

    <body style="margin:0px;">

        <p>把鼠标悬停在下面的矩形上可以看到坐标：</p>

        <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
            onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
        <br />
        <br />
        <br />
        <div id="xycoordinates"></div>

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
            <polygon points="100,10 40,180 190,60 10,60 160,180"
                style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
        </svg>
    </body>

    </html>

</body>

</html>

若数

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记-最基础HTML标签-Canvas的使用（六）

详细学习链接<!DOCTYPE html><html><body> <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:...
复制链接

扫一扫