画圆及填充文字

<!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. 为什么说DOM操作很慢

    转自http://www.cnblogs.com/yuzhongwusan/articles/5275933.html   一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大 ...

  2. cmder默认的命令提示符λ改成$

    新版的cmder(2016.11.3测试)单纯修改init.bat或以前的方法都试过了不行,下面是我自己找到的方法.亲测可行. cmder\vendor\clink.lua文件中第41行中{lamb} ...

  3. 基于stm32的can总线彻底研究

    1.CAN总线的初始化 void can_init(void){      CAN_InitTypeDef        CAN_InitStructure;      CAN_FilterInitT ...

  4. css属性详解

    一.字体属性 字体 font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. body { font-famil ...

  5. PortableApps使用入门

    PortableApps使用入门 Software 介绍 添加软件 绿软下载站推荐 介绍 官网:http://portableapps.com/ PortableApps作为一款卓越的绿软管理软件,它 ...

  6. 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  7. Luogu3242：[HNOI2015]接水果

    题面 Luogu3242 Sol 考虑每个盘子怎样才能接到一个水果 分两种情况: 盘子的\(x, y\)在一条链上,那么水果的两点就要在这条链之外 不在的话,水果的两点就分别在盘子的两点的子树中 记录 ...

  8. angular中label包含input点击事件的问题

    问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName   //INPUT, 点击img ...

  9. 身份证号码的正则表达式及验证详解(JavaScript，Regex)

    简言 在做用户实名验证时,常会用到身份证号码的正则表达式及校验方案.本文列举了两种验证方案,大家可以根据自己的项目实际情况,选择适合的方案. 身份证号码说明 居民身份证号码,正确.正式的称谓应该是&q ...

  10. 打印Java异常堆栈信息

    背景 在开发Java应用程序的时候,遇到程序抛异常,我们通常会把抛异常时的运行时环境保存下来(写到日志文件或者在控制台中打印出来).这样方便后续定位问题. 需要记录的运行时环境包含两部分内容:抛异常时 ...