当前位置: 首页 > 工具软件 > feilong > 使用案例 >

HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET...

孔礼骞
2023-12-01
HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>HTML5</title>

    <!-- WinJS 引用 -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- HTML5 引用 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>此处显示内容</p>
    <canvas id="canvas1" width="320" height="200">
        您的浏览器不支持canvas 元素

    </canvas>

<canvas id="canvas2" width="320" height="200">

        您的浏览器不支持canvas 元素
    </canvas>
    <div id="div1" οnmοusemοve="getCo(event)" οnmοuseοut="clearCo()" style="width:300px;height:200px;border:1px solid green" >

        <div id="xycoordiv"></div>

    </div>
</body>
    <script>
        //先找到canvas这个画布
        var c = document.getElementById("canvas1");
        //获得对象,这个对象是用来画图的
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#ff0000";
        //开始绘图了,通过fillRect(),四个参数,开始的坐标,大小
        ctx.fillRect(150, 150, 300, 200);//这是输出的一个方形
        var c1 = document.getElementById("canvas2");
        var ctx1 = c1.getContext("2d");
        //在绘图之前通知canvas 我要开始绘图了
        ctx1.beginPath();
        //Math.PI获得圆周率,会出一个半圆,*2 获得一个圆
        ctx1.arc(100, 100, 15, 0, Math.PI * 2, true);
        //闭合 圆
        ctx1.closePath();
        ctx1.fillStyle = "green";
        ctx1.fill();
        function getCo(e) {
            var x = e.clientX;
            var y = e.clientY;
            document.getElementById("xycoordiv").innerHTML = "当前坐标是:" + x + ',' + y ;
        }
        function clearCo() {
            document.getElementById("xycoordiv").innerHTML = "";
        }//获取鼠标的坐标
    </script>
</html>



转载于:https://www.cnblogs.com/wang3680/p/be3239da16c5b2c0486037bbe8a3027a.html

 类似资料: