画圆及填充文字

<!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实现数据库读写分离

    Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作 ...

  2. centos下利用qemu搭建arm模拟器

    有点繁琐,整理一下,系统环境centos6.6,虚拟机以及实际系统中测试通过. 一.交叉编译器的下载与安装1.下载地址:http://blog.csdn.net/dldw8816/article/de ...

  3. Jenkins Android 自动打包配置

    一.Jenkins自动打包配置 目标:1. 自动打包:2. 自动上传:3. 友好下载 1. Jenkins简介 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作. 减少重复劳 ...

  4. 错误代码： 1305 PROCEDURE world.insert_data does not exist

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:call insert_data() 错误代码: 1305 PROCEDUR ...

  5. Java生成文件夹

    Java生成文件夹 1.说明 判断文件夹是否存在,如果不存在就创建该文件夹,并打印其路径:如果存在,打印其路径 2.实现源码 /** * @Title:BuildFolder.java * @Pack ...

  6. GStreamer 简化 Linux 多媒体开发

    Streamer 是 GNOME 桌面环境下用来构建流媒体应用的开源多媒体框架(framework),其目标是要简化音/视频应用程序的开发,目前已经能够被用来处理像 MP3.Ogg.MPEG1.MPE ...

  7. Linux集群问题~浅谈

    系统扩展的方式 # scale up 向上扩展 # scale out 向外扩展 集群类型 LB 负载均衡集群 Load Balancing HA 高可用集群 High Availability HP ...

  8. String.valueOf(Thread.currentThread().getContextClassLoader().getResource("")) 获取项目的绝对路径（shiro项目中来的八）

    一,上代码 String.valueOf(Thread.currentThread().getContextClassLoader().getResource("")) file: ...

  9. iBatis基础知识

    iBatis简介: 特点:结构性好,小巧,容易上手 搭建环境: 1.创建java 项目 2.导入(3个)jar包:ibatis-2.3.0.667.jar,mysql驱动包,Junit测试包 3.配置 ...

  10. 【网络流24题】最长k可重区间集（费用流）

    [网络流24题]最长k可重区间集(费用流) 题面 Cogs Loj 洛谷 题解 首先注意一下 这道题目里面 在Cogs上直接做就行了 洛谷和Loj上需要判断数据合法,如果\(l>r\)就要交换\ ...