<!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. bootstrap 日期控件常用选项

    使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...

  2. 20145321《网络对抗》Exp2 后门原理与实践

    实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF meterpreter生成可执行文件,利用ncat或 ...

  3. C++ tinyXML的使用和字符编码转换

    转载:http://jetyi.blog.51cto.com/1460128/761708/ 关于tinyxml使用的文档有很多(这篇文章就写的很好),这里仅提一下字符编码的转换问题,如果你不熟悉字符 ...

  4. win7 64位debug解决方法

    1.下载win 64位的DOSBox,如DOSBox0.74: 2.下载win 32 debug.exe,并复制到调用的目录,如d盘根目录d:\ 3.安装DOSBox,并运行:如下图: 4.键入命令: ...

  5. C#学习笔记（一）：C#简介

    计算机语言计算机语言是指用于人与计算机之间通讯的语言机器码——汇编语言——高级语言(面向过程(线性).面向对象(类).面向组件(Unity)) 一.计算机语言发展趋势1.简单:代码生成逻辑2.面向人类 ...

  6. C语言通过枚举网卡，API接口可查看man 7 netdevice--获取接口IP地址

    /*代码来自StackOverflow: http://stackoverflow.com/questions/212528/linux-c-get-the-ip-address-of-local-c ...

  7. Ubuntu 14.04下 Java通用安装方法

    参考: 解决Floodlight1.2+Mininet问题及使用安装 Ubuntu下安装JDK1.7图文详解 Ubuntu 14.04下 Java通用安装方法 1.到oracle官网下下载对应jdk包 ...

  8. 51nod 1444 破坏道路（最短路）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1444 题意: 思路: 哇,思路爆炸. 因为每条边的权值都为1,所以可以直 ...

  9. MUI --- 多个页面之间的传值 A页面B 页面 C页面

    问题: 夸页面传值的,A.B.C三个页面,点A弹出B,C是B子页面;A有两个值要传到C页面中,要怎么样传递呢? A页面传值就不累述了 B页面才是关键 mui.plusReady(function() ...

  10. MVC ---- EF高级增删改

    //高级修改(创建对象) public void EditAdance(){ //创建要修改的对象 Parameter pm = new Parameter() { ParaNo = ", ...