body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;}html, body{ }h1 { font-size:1.5em; font-weight:bold;}h2 { font-size:1.4em; font-weight:bold;}h3 { font-size:1.3em; font-weight:bold;}h4 { font-size:1.2em; font-weight:bold;}h5 { font-size:1.1em; font-weight:bold;}h6 { font-size:1.0em; font-weight:bold;}img { border:0; max-width: 100%;}blockquote { margin-top:0px; margin-bottom:0px;}table { border-collapse:collapse; border:1px solid #bbbbbb;}td { border-collapse:collapse; border:1px solid #bbbbbb;}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" onmousemove="getCo(event)" onmouseout="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>

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

  1. JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET

    JS获取整个HTML网页代码 - Android 集美软件园 - 博客频道 - CSDN.NET JS获取整个HTML网页代码 分类: Android提高 2012-01-12 23:27 1974人 ...

  2. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  3. c++ 如何获取系统时间 - zjnig711的信息仓库 - 博客频道 - CSDN.NET

    c++ 如何获取系统时间 - zjnig711的信息仓库 - 博客频道 - CSDN.NET c++ 如何获取系统时间 分类: C/C++ 2008-05-08 22:15 14115人阅读 评论(5 ...

  4. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  7. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  9. python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客

    python编写的自动获取代理IP列表的爬虫-chinaboywg-ChinaUnix博客 undefined Python多线程抓取代理服务器 | Linux运维笔记 undefined java如 ...

随机推荐

  1. 笨方法学python--简介

    该章提到编程新手所需的三种最重要的技术:读和写,注重细节,发现不同. 读 和 写 即熟悉代码中的各种字符. 注 重 细 节 将例子一字不差地打出来,通过实践训练自己 发 现 不 同 这个是通过长年累月 ...

  2. Linux标准目录

    本文参考鸟哥的linux私房菜 /bin 获得最小的系统可操作性所需要的命令 /boot 内核和加载内核所需要的文件 /dev 终端.磁盘.调制解调器等的设备项 /etc 关键的启动文件和配置文件 / ...

  3. IO包中的其他类

    查看各对象API文档 打印流 PrintWriter PrintStream 序列流:对多个流进行排列合并 SequenceInputStream public static void main(St ...

  4. JAVA-面向对象2--继承

    1. 继承的好处: 1.提高代码复用性. 2.让类与类之间产生关系,为面向对象的第三大特征 多态 提供了前提 2.java中支持单继承,不直接支持多继承,但对c++中多继承进行了改良.java通过多实 ...

  5. ActiveX控件在IE中不响应Backspace消息

    1.操作输入法需要导入: #include <imm.h> #pragma comment(lib, "imm32") 2.定义变量: //键盘钩子句柄 HHOOK g ...

  6. spring jdbc 源码

    类:org.springframework.jdbc.core.JdbcTemplate public <T> T execute(PreparedStatementCreator psc ...

  7. easyui formatter 返回easyui组件

    <table id="dg2" title="标题" style="width:400px;float: left;"> < ...

  8. Android根据Button状态(normal,focused,pressed)显示不同背景图片

    Android根据Button状态(normal,focused,pressed)显示不同背景图片 Android中Button 有focused, selected, pressed 等不同状态,通 ...

  9. C 汇编代码 函数调用指令和栈平衡

    1. CALL指令: CALL指令可不是如唤指令,而是子程序调用指令.那么汇编语言中的子程序是什么呢?子程序能被其它程序调用,在实现某种功能后能自动返回到调用程序去的程序.其最后一条指令一定是返回指令 ...

  10. 线关节(Line Joint)

    package{ import Box2D.Common.Math.b2Vec2; import Box2D.Dynamics.b2Body; import Box2D.Dynamics.Joints ...