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. SVN-svn path not found: 404 Not Found

    报错信息是本地找不到文件 因为我直接移动了项目中的java文件到别的目录,在SVN看来相当于变相的删掉了一个目录的文件,在另外一个目录新增文件, 但是移动文件SVN是不会做删除记录到日志文件中的,所以 ...

  2. sql server数据库查询同义词

    查询数据库同义词: select * from sys.synonyms, 查询同义词个数:select count(1) from sys.synonyms

  3. linux command----vi

    vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器.Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能. ...

  4. linux的学习系列 2--文件系统

    Linux中的所有数据都被保存在文件中,所有的文件被分配到不同的目录.目录是一种类似于树的结构,称为文件系统. 当你使用Linux时,大部分时间都会和文件打交道,通过本节可以了解基本的文件操作,如创建 ...

  5. Factory and AbstractFactory ——抽象与具体的分离

    Factory and AbstractFactory——抽象与具体的分离 面向对象标准关注于抽取一系列事物的共同行为,组建一个基类.行为再划分成两类: 1:现在及以后不太可能会变化的行为. 2:以后 ...

  6. 小师妹问 easyUI mergeCells 行合并后表头和内容对不齐

    公司来了一个做easyUI的妹子,恰好那妹子是和我一个学校的,有一天下班妹子在超时买东西正好巧遇,然后妹子就问了问题,随便说手机卡需要我帮忙刷机,然后就问手机买了多久, 多少钱,刚买的时候好用不,然后 ...

  7. 使用React Native一年后的感受

    转载自:http://www.dobest.me/blog/2016/06/12/%E4%BD%BF%E7%94%A8React%20Native%E4%B8%80%E5%B9%B4%E5%90%8E ...

  8. Swift 学习笔记 （二）

    原创:转载请注明出处 41.闭包表达式语法(Closure Expression Syntax) 闭包表达式语法有如下一般形式: { (parameters) -> returnType in ...

  9. Lucene入门教程

    Lucene教程 1 lucene简介 1.1 什么是lucene     Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么 ...

  10. POJ 2084 Game of Connections（卡特兰数）

    卡特兰数源于组合数学,ACM中比较具体的使用例子有,1括号匹配的种数.2在栈中的自然数出栈的种数.3求多边形内三角形的个数.4,n个数围城圆圈,找不相交线段的个数.5给定n个数,求组成二叉树的种数…… ...