使用路径arc
<!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的更多相关文章
- Javascript高级编程学习笔记（87）—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- HTML5 基础
1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...
- html5--5-16 综合实例绘制饼图
html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...
- html5--5-15 绘制阴影
html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- html5--5-14 阶段小练习：绘制太极图案
html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...
- html5--5-13 渐变色
html5--5-13 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2, ...
- html5--5-12 渐变色
html5--5-12 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2, ...
随机推荐
- MySQL中的基本SQL语句
标准SQL包含了4种基本的语句类别: DDL语句,数据定义语句,主要用来定义数据库,表名,字段,例如create,drop,alter. DML语句,数据操作语句,用来对数据记录的增删改查,还用来保证 ...
- Kafka学习之（六）搭建kafka集群
想要搭建kafka集群,必须具备zookeeper集群,关于zookeeper集群的搭建,在Kafka学习之(五)搭建kafka集群之Zookeeper集群搭建博客有说明.需要具备两台以上装有zook ...
- 贪婪算法（Greedy Algorithm）
Greedy Algorithm <数据结构与算法--C语言描述> 图论涉及的三个贪婪算法 Dijkstra 算法 Prim 算法 Kruskal 算法 Greedy 经典问题:coin ...
- 设置redis访问密码
在服务器上,这里以linux服务器为例,为redis配置密码. 1.第一种方式 (当前这种linux配置redis密码的方法是一种临时的,如果redis重启之后密码就会失效,) (1)首先进入redi ...
- Android实践项目汇报（总结）
天气客户端开发报告 1 系统需求分析 1.1功能性需求分析 天气预报客户端,最基本就是为用户提供准确的天气预报信息.天气查询结果有两种:一种是当天天气信息,信息结果比较详细,除温度.天气状况外还 ...
- Thinking in React 观后感
原文地址:Thinking in React 今天在翻阅 React 文档,看到一篇名为「Thinking in React」的文章觉得写的很好.文章介绍了如何使用 React 构建一个应用,并不是手 ...
- Python3基础 set 自动将重复合并掉 不支持索引
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Makefile使用总结【转】
1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...
- 括号序和dfs序
记得清北讲过括号序和dfs序,忘记了 dfs序 dfs序就是dfs的顺序,这个好记 就是在dfs遍历树的时候,将每个结点开始时记录一次,结束时记录一次 而且一个子树可以表示为连续的一段, 只有子树操作 ...
- 51nod 1266 蚂蚁
蚂蚁这道题 就是 不管两只蚂蚁相撞 他们会朝自己的反方向走 不过可以这么想 有蚂蚁1 和 蚂蚁2 并且相向而行 如果撞了以后 蚂蚁1和蚂蚁2 就往回走 ,这里可以理解成蚂蚁1,蚂蚁2 继续 ...