<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 1024;
canvas.height = 768; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); context.lineWidth = 5;
context.strokeStyle = "#005588"; for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,50,40,0,2*Math.PI*(i+1)/10,false);
context.closePath(); context.stroke()
} for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false);
// context.closePath(); context.stroke()
} for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,350,40,0,2*Math.PI*(i+1)/10,false);
context.closePath(); context.stroke();
context.fillStyle ="#005588"
context.fill();
} }else{
alert('当前游览器不支持Canvas，请更换游览器后再试！');
}
}
</script>
</body> <script>
/*
总结 context.arc(
（圆心x 圆心y 半径r）
centerx,centery,radius, （起始角度，终止角度）
startingAngle,endingAngle, (false 顺时针绘制)
anticlockwise = false
)
*/
</script>
</html>
canvas-arc.html的更多相关文章
-
HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
-
HTML5 Canvas arc()函数
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
-
HTML5 Canvas Arc Tutorial
HTML5 Canvas Arc Tutorial HTML5 Canvas Arc Tutorial
-
对canvas arc()中counterclockwise参数的一些误解
一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法,对它的认识比较模糊,导致犯了一些错误,特发此文,以纠正之前的错误理解. arc()方法定义如下: arc() 方 ...
-
HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
-
canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
-
html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
-
基于canvas的电子始终
//code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
-
HTML5 Canvas 小例子 旋转的时钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
html5 canvas时钟
基础知识点: canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
随机推荐
-
用SQL命令查看Mysql数据库大小
要想知道每个数据库的大小的话,步骤如下: 1.进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2.查询所有数据的大小: s ...
-
opencv-3.x.0-x86-mingw32-staticlib-gcc5.3.0-20160712.7z
折腾了半天 用 cmake 3.5.0 + gcc5.3.0 编译 opencv3.x.0 静态库 opencv-3.0.0-x86-mingw32-staticlib-gcc5.3.0-201607 ...
-
zz Windows 10安装教程：硬盘安装Win10 系统步骤（适合32位和64位）
Windows 10安装教程:硬盘安装Win10 系统步骤(适合32位和64位) Posted on 2015年01月28日 by 虾虾 22 Comments 最新的Windows 10 MSD ...
-
C++ 基本知识
无论父类与子类的析构函数是否是virutal,子类的析构函数都会调用父类的析构函数 调用构造函数是与构造函数顺序相反,先子类后基类,否则如果基类先析构,子类的有些资源已经不存在了,会出错. 在C++中 ...
-
POJ 1028解答
#include <iostream>#include <cstdio>#include <cmath>#include <stack>#include ...
-
java 与 R 相互调用
https://www.r-project.org/ http://cos.name/2013/08/r-rjava-java/ http://blog.csdn.net/hwssg/article/ ...
-
Java的最大优势还是跨平台么？
之前码农界有码农说Java的最大优势是跨平台,真的是这样么?其实当时网络没这么火爆的时候,确实是这样的,但现在这已然不是了. 跨平台还是Java的最大优势么? 有跨平台需求的仅仅是客户端应用,而不是服 ...
-
一个在字符串中查找多个关键字的函数strstrs（三种不同算法实现及效率分析）
平时项目中有时需要用到在字符串中搜索两个或更多的关键字的情景.例如:将字符串"ab|cd#ef|"按竖线或者井号做分隔 如果是大项目,一般会采用正则表达式做处理.但有时写个小程序, ...
-
France &#39;98
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=30506#problem/H #include<map> #include&l ...
-
linux-mv
linux-mv 主要用于文件或者目录的移动或者改动, 命令参数 -i:ruguo目标文件或者目录存在,提示是否覆盖目标文件或目录 -f:无论目标文件是否存在,直接覆盖,不提示, 有好多参数,自己可以 ...