画圆及填充文字

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style media="screen">

            canvas{

                background: #ccc;

            }

        </style>

    </head>

    <body>

        <canvas id="canvas" width="600" height="600"></canvas>

    </body>

    <script type="text/javascript">

    var canvas=document.getElementById('canvas');

    var ctx=canvas.getContext('2d');

    ctx.strokeStyle='#fff';

    ctx.beginPath();

     ctx.arc(300,300,50,0,2*Math.PI);

    //  ctx.closePath();

    //  ctx.fillStyle='grey';

    //  ctx.fill();

     ctx.stroke();

     //

     ctx.beginPath();

     ctx.strokeStyle='green';

     ctx.arc(300,300,50,0.5*Math.PI,1.5*Math.PI);

     ctx.stroke();

    //   ctx.closePath();

    ctx.font='bold 19px arial'

    ctx.fillStyle='red';

    ctx.fillText('50%',285,310)

    </script>

</html>

　　

canvas---HTML5新特性的更多相关文章

  1. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  2. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  3. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  4. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  5. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  6. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  7. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  8. HTML5新特性-- -定时器

    一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...

  9. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  10. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

随机推荐

  1. redis下载安装以及添加服务

    一.下载安装 从 github 下载:https://github.com/MSOpenTech/redis/releases 或者 https://github.com/ServiceStack/r ...

  2. strcpy、strncpy与memcpy的区别与使用方法

    strcpy.strncpy.memcpy这三个C语言函数我们在主机代码编写中会很频繁的使用到,但是三个函数的区别.使用时该注意什么还是有必要说下的. 本文参考<C 标准库>编写. 一.函 ...

  3. android的Findbugs问题整理

    1. 对字符串不相等的判断 错误 if (chapterInfo.getPayMode() != String.valueOf(com.shuqi.base.common.Constant.PAYMO ...

  4. 【mongodb系统学习之三】进入mongodb shell

    三. 进入mongodb shell(数据库操作界面) : 1).在mongodb的bin目录下输入./mongo,默认连接test数据库,连接成功会显示数据库版本和当前连接的数据库名,如图: 2). ...

  5. 如何注册Filter

    AX文件的一个对外接口DllRegisterServer,由外部调用,比如注册AX的时候:regsvr32 xxx.ax       通常情况下,我们的filter可能注册在"Direct ...

  6. c语言 第二次实验报告

    一·实验题目,设计思路,实现方法 11-7 找鞍点 一个矩阵元素的"鞍点"是指该位置上的元素值在该行上最大.在该列上最小. 本题要求编写程序,求一个给定的n阶方阵的鞍点. 利用双重 ...

  7. CF Educational Round 23 F.MEX Queries

    写了3小时 = =.这两天堕落了,昨天也刷了一晚上hihocoder比赛,还爆了零.之后得节制点了,好好准备考研.. 首先很容易想到 压缩数据 + 线段树 然后对于Pushdown真很难写..需要牵涉 ...

  8. 下载安装eclipse

    其实在配置好jdk之后,只要下载eclipse压缩包下载完解压就行了.很多人在eclipse官网上下载的安装包版本的,下载完了之后又不知道怎么安装.下面我给大家介绍以下如何下载eclipse的Oxyg ...

  9. jsonp的案例

    一,转发一 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性.看起来不知道什么意思,实践一下就知道了. 1.随便建两个网页 一 ...

  10. OWA 无法连接到Exchange

    Outlook WebAccess中无法连接到Microsoft Exchange.如果问题仍然存在,请联系您的组织的技术支持. 1.   在Exchange邮件服务器,收件人配置--邮箱--右击用户 ...