canvas-arc.html
<!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() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
随机推荐
- 561.数组拆分I
题目:给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最大. ...
- 7.AOP编程
注解和xml混合使用 1.将所有的bean都配置xml中 <bean id="" class=""> 2.将所有的依赖都使用注解 @Autowire ...
- [翻译] FastReport TfrxReport组件使用
一:加载和保存报表 报表默认保存在项目窗体文件中,大多数情况下,没有更多的操作要深圳市, 因此,你不需要采取特别措施来载入报告.如果你决定保存报表到文件或是数据库中 (这样更灵活, 比如修改报表不用重 ...
- Kaldi单音素模型 训练部分
在Kaldi中,单音素GMM的训练用的是Viterbi training,而不是Baum-Welch training.因此就不是用HMM Baum-Welch那几个公式去更新参数,也就不用计算前向概 ...
- struts2框架学习笔记4：获取参数
第一种参数获取方式: 编写一个前端页面,提交表单,做示例: <form action="${pageContext.request.contextPath}/Demo1Action&q ...
- 惊艳，Dubbo域名已改，也不再局限于Java！
今天作者想去 Dubbo 官网查下相关资料,发现官方域名由 dubbo.io 直接跳转至 dubbo.apache.org 下了,然后突然回想起 Dubbo 已经在 2 月份正式进入了 Apache ...
- js中数字直接点方法会报错，如1.toString()
Number(11).toString() "11" var num = 111; undefined num.toString() "111" .toStri ...
- SQL分别求行、列的平均值
日常工作中,会需要用SQL求平均值,分别是求某一项的平均值或求某一个对象的平均值,放到表格就是求一行中的几个字段的平均值和求一列的平均值. 第一种:[列的平均值]AVG:这个函数相信大家都不陌生的,求 ...
- 2.WF 4.5 流程引擎设计思路
本文主要给大家分享下基于WF 4.5框架的流程引擎设计思路 1.流程启动时的数据写入EventMsgPP对象中,ObjectAssemblyType记录流程启动时需要的类型,ObjectContent ...
- MD5加密之加密字符串
public static String encode(String str) { String encodeString = ""; try { MessageDigest md ...