<!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. 20145304 Exp9 Web安全基础实践

    20145304 Exp9 Web安全基础实践 实验后回答问题 (1)SQL注入攻击原理,如何防御 SQL注入是将查询语句当做查询内容输入到查询的框中,以此来使服务器执行攻击者想让它执行的语句,而不是 ...

  2. 20145329 《网络对抗技术》Web基础

    实践目标 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. Web前端javascipt 理解JavaScript的基本 ...

  3. JavaScript new return 类的实例化

    new初始化方法 简单没有return的就不写了 function Person() { this.name="hongda"; ; return "fffffff&qu ...

  4. 查找SQL 存储过程、触发器、视图!

    ALTER proc [dbo].[SP_SQL](@ObjectName sysname)  as  set nocount on ;  declare @Print nvarchar(max)-- ...

  5. kylin从入门到实战：实际案例

    版权申明:转载请注明出处.文章来源:http://bigdataer.net/?p=308 排版乱?请移步原文获得更好的阅读体验 前面两篇文章已经介绍了kylin的相关概念以及cube的一些原理,这篇 ...

  6. mysql时间格式化函数日期格式h和H区别

    本文为博主原创,未经允许不得转载: 今天碰到一个问题,发现项目中有一个统计图的数据和时间格式没有对应准确,统计图要描述的是操作次数和操作时间的关系, 但很奇怪的是操作次数对应的时间却是凌晨,实际应用中 ...

  7. 51nod 1463 找朋友（线段树+离线处理）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1463 题意: 思路: 好题! 先对所有查询进行离线处理,按照右区间排序, ...

  8. 中文名文件上传到linux服务器上以后文件名会乱码（openoffice）

    1.中文名文件上传后保存在linux服务器上文件名会乱码,但是我们通过SSH直接对服务器上的一个文件进行重命名是可以使用中文的,而且显示出来是正确的,这说明服务器是可以支持中文的. 2.而为什么上传的 ...

  9. java static关键字使用

    一.使用static声明属性 1.使用static声明属性,则该属性属于全局变量(有些地方也称静态属性). 2.类的属性调用格式: 类名称.static 属性Preson.country=B城; 二. ...

  10. spring boot 邮件发送（带附件）

    首先开启QQ邮箱的POP.SMTP服务器,获取授权码. 设置-->账户-->POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务 pom.xml需要加载三个ja ...