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() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
随机推荐
- Avro实现RPC
场景:一个客户端,一个服务端(创建两个avro工程).客户端向服务端发送数据,服务端根据算法算出结果,返回给客户端. Http主外,RPC主内.(解决分布式环境下,节点间的数据通信或远程过程调用) 实 ...
- 背水一战 Windows 10 (70) - 控件（控件基类）: UIElement - Transform3D（3D变换）, Projection（3D投影）
[源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...
- vue keep-alive解决关闭标签动态缓存问题
直接上代码: <keep-alive :include='topNavMentNames'> <router-view ></router-view> </k ...
- Java基础--枚举
1.枚举简介 枚举是由一组固定的常量组成的类型,自定义数据类型. 枚举的常量值一定是可列举的有限值.常量值的类型都是public static final. 下面代码中的Gender 是一种自定义的数 ...
- vscode 开发 Java web 急速教程
1.确认在本机已安装 JAVA SDK 2.确认在本机已安装 maven 3.确认在本机已安装 tomcat 下面是我本机相关软件版本: java version "1.8.0_191&qu ...
- U-boot中SPL功能和源码流程分析
在U-boot目录下,有个比较重要的目录就是SPL的,SPL到底是什么呢?为什么要用它呢? SPL(Secondary programloader)是uboot第一阶段执行的代码.主要负责搬移uboo ...
- js中数字直接点方法会报错，如1.toString()
Number(11).toString() "11" var num = 111; undefined num.toString() "111" .toStri ...
- python 怎样获取toast？
toast是什么? 想要获取toast的小伙伴们,肯定知道这个是一个什么玩意,例行还是加一个图,加以解释,下图的就是传说中的toast,它有一个特点,出现时间特别短,很难通过定位元素去获取这个toas ...
- python 离散序列 样本数伸缩（原创）
解决问题: 有一个固定长度的1维矩阵,将这个矩阵的取样点进行扩充和减少 功能函数: def discrete_scale(data, num): import numpy as np import c ...
- odoo开发笔记 -- 翻译机制及导入.po文件
待补充 http://ju.outofmemory.cn/entry/181972