<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用路径</title>
</head>
<body>
    <canvas id="ourCanvas" width="400" height="400" style="border:3px dashed #0094ff;" ></canvas>
<script>
    //arc(float x,float y,float radius,float startAngel,endAngel,booleancounterclockwise)counterclockwise逆时针
    //向Canvas的当前路径添加一段弧。绘制以x、y为圆心的，radius为半径，从startAngel角度开始，到endAngel角度结束的圆弧。startAngel和endAngel以弧度作为单位。
    var canvas = document.getElementById("ourCanvas");
    var ctx = canvas.getContext("2d");
    //开始定义路径
    ctx.beginPath();

//添加一段圆弧
    ctx.arc(166, 166, 90, 0,Math.PI*0.6, true);
  
    //关闭路径
    ctx.closePath();

//设置填充颜色
    ctx.strokeStyle = "#f00";

//设置填充宽度
    ctx.lineWidth = 10;

//填充当前路径
    ctx.stroke();

</script>
</body>
</html>

使用路径arc的更多相关文章

  1. Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  2. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  3. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  4. HTML5 基础

    1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...

  5. html5--5-16 综合实例绘制饼图

    html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...

  6. html5--5-15 绘制阴影

    html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  7. html5--5-14 阶段小练习：绘制太极图案

    html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...

  8. html5--5-13 渐变色

    html5--5-13 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2, ...

  9. html5--5-12 渐变色

    html5--5-12 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2, ...

随机推荐

  1. bzoj1648 / P2853 [USACO06DEC]牛的野餐Cow Picnic

    P2853 [USACO06DEC]牛的野餐Cow Picnic 你愿意的话,可以写dj. 然鹅,对一个缺时间的退役选手来说,暴力模拟是一个不错的选择. 让每个奶牛都把图走一遍,显然那些被每个奶牛都走 ...

  2. Python3.x（windows系统）安装matplotlib库

    Python3.x(windows系统)安装matplotlib库 cmd命令: pip install matplotlib 执行结果:

  3. 20145322 Exp5 Adobe阅读器漏洞攻击

    20145322 Exp5 Adobe阅读器漏洞攻击 实验过程 IP:kali:192.168.1.102 windowsxp :192.168.1.119 msfconsole进入控制台 使用命令为 ...

  4. 基于Android应用《玩转英语》（总报告）

                                                                         基于Android应用<玩转英语>   摘  要 ...

  5. 利用Qt开发跨平台APP

    本文将手把手教你如何在Windows环境下,使用Qt编译出安卓应用程序. Qt是一个优秀的跨平台开发工具.我们利用Qt可以很方便地将一次编写的应用,多次编译到不同平台上,如Windows.Linux. ...

  6. Spring的面向切面

    Spring的面向切面 在应用开发中,有很多类似日志.安全和事务管理的功能.这些功能都有一个共同点,那就是很多个对象都需要这些功能.复用这些通用的功能的最简单的方法就是继承或者委托.但是当应用规模达到 ...

  7. /etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc 文件的作用

     转载自:http://blog.csdn.net/u013968345/article/details/21262033 /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登 ...

  8. junit中test注解测试使用案列解析二

    本文原创,转载请注明出处 在上文中,已经简单的解析了junit中test注解的使用方法,今天在进行test测试时,遇到了一个异常,于是想深 入的研究一下. 还原一下今天的异常代码: @Service ...

  9. HDU 3549 Flow Problem（最大流模板）

    http://acm.hdu.edu.cn/showproblem.php?pid=3549 刚接触网络流,感觉有点难啊,只好先拿几道基础的模板题来练练手. 最大流的模板题. #include< ...

  10. Quartz.NET简介及入门指南

    Quartz.NET简介 Quartz.NET是一个功能完备的开源调度系统,从最小的应用到大规模的企业系统皆可适用. Quartz.NET是一个纯净的用C#语言编写的.NET类库,是对非常流行的JAV ...