画圆及填充文字

<!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. linux 版本控制及rpm打包

    版本控制 subversion:是一个自由/开源的版本控制系统,在subversion管理下,文件和目录可以超越时空subversion允许你数据恢复到早期版本,或者是检查数据修改历史许多人将版本控制 ...

  2. 吐槽版︱MRO-Microsoft R Open快捷键+界面识别+功能设置

    下载了之后,发现连运行(RUN键)在哪都不知道,蒙逼的在哪倒弄半天,都执行不了...问了别人,都说"ctrl+enter",但是我的电脑执行不了,于是今天就狠狠的一个一个按钮的点一 ...

  3. Duplicate <http> element detected

    1.错误描述    org.springframework.beans.factory.parsing.BeanDefinitionParsingException:Configuration pro ...

  4. freemarker.template.TemplateException:Error executing macro:mainSelect

    1.错误描述 freemarker.template.TemplateException:Error executing macro:mainSelect require parameter:id i ...

  5. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  6. Android动态类生成预加载-dexmaker使用

    一.dexmaker简单介绍 dexmaker是运行在Android Dalvik VM上,利用Java编写,来动态生成DEX字节码的API.如果读者了解AOP编程的话,应该听说过cglib or A ...

  7. BZOJ 1079: [SCOI2008]着色方案（巧妙的dp）

    BZOJ 1079: [SCOI2008]着色方案(巧妙的dp) 题意:有\(n\)个木块排成一行,从左到右依次编号为\(1\)~\(n\).你有\(k\)种颜色的油漆,其中第\(i\)种颜色的油漆足 ...

  8. 【Tyvj 1728】普通平衡树

    题面 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(若有多个相同的数,因输 ...

  9. Frogger POJ - 2253

    题意 给你n个点,1为起点,2为终点,要求所有1到2所有路径中每条路径上最大值的最小值. 思路 不想打最短路 跑一边最小生成树,再扫一遍1到2的路径,取最大值即可 注意g++要用%f输出!!! 常数巨 ...

  10. 【经验随笔】MYSQL表加锁升级导致数据库访问失败

    背景:有一次定位问题发现,在同一个session连接中对MYSQL部分表加锁,导致其它未加锁的表不能访问. 用Spring管理MYSQL数据连接,在多线程访问数据库的情况下容易出问题.一个线程中对部分 ...