Canvas入门03-绘制弧线和圆
绘制弧线的API:
context.arc(centerx:number, centery: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean)
参数说明:
- centerX 圆心坐标x
- centerY 圆心坐标y
- radius 圆半径
- startAngle 起始弧度
- endAngle 结束弧度
- anticlockwise 是否逆时针绘制,默认false,也就是顺时针绘制
对于一个圆来说,0弧度是从水平方向右侧开始的。
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768; if (canvas.getContext('2d')) {
var context = canvas.getContext('2d');
console.log(context); // CanvasRenderingContext2D // context.arc(300, 300, 200, 0, 1.5 * Math.PI);
// context.arc(300, 300, 200, 0, 1.5 * Math.PI, true);
// context.arc(300, 300, 200, 0, 0.5 * Math.PI, true); context.lineWidth = 3;
context.strokeStyle = '#005588';
context.fillStyle = '#005577';
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI*(i+1)/10);
// context.closePath(); // 路径会被自动封闭
context.stroke();
// context.fill();
}
} else {
alert('当前浏览器不支持Canvas,请更换浏览器后再试');
}
效果:
注意:
如果加上了context.closePath() 所绘制的弧会自动封闭。
Canvas入门03-绘制弧线和圆的更多相关文章
- canvas详解---绘制弧线
Draw an arc context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false); 参数一是圆 ...
- html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- Canvas入门(2):图形渐变和图像形变换
来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- Canvas入门到高级详解(上)
神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...
- canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记(上篇)-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
随机推荐
- 七、设备驱动中的阻塞与非阻塞 IO(二)
7.2 轮询 7.2.1 介绍 在用户程序中的 select() 和 poll() 函数最终会使设备驱动中的 poll() 函数被执行. 设备驱动程序中的轮询函数原型: /** 用于询问设备是否可以非 ...
- 基本运算符与if while详解:
''' 基本运算符与if while详解: ''' # 算术运算符 # + - * / % // ** # 返回一个数值 # 比较运算符 # > >= < <= == != # ...
- Windows 2012 R2 DataCenter服务器 重启之后,其他加域电脑无法访问域账户
需在域控服务器重启,服务Kerberos Key
- Eclipse中对一个项目进行复制粘贴为一个新项目
1:对目标项目执行右键,选择“Copy”,然后在空白处右键,选择“Paste”结果如下图: 2:右键新项目,点击Properties, 3:打开Navigator视图 4:打开.settings文件夹 ...
- 机器学习降维--PCA
1.原理和概念 PCA(Principal Component Analysis),即主成分分析方法,是一种使用最广泛的数据降维算法. PCA的主要思想是将n维特征映射到k维上,这k维是全新的正交特征 ...
- mysql的视图、索引、触发器、存储过程
USE school; SELECT * FROM sc; SELECT * FROM course; SELECT * FROM student; SELECT * FROM teacher; -- ...
- apk反编译(仅供娱乐)
第一个文件夹里面放apk,第二个解析classes.dex,第三个查看java代码,下面三个apktool用来解析apk文件, 记得在环境变量中配置apktool,路径为apktool所在路径 1.解 ...
- postman—随机数和Monitors
postman做重复测试时,随机数就有很大的作用,不用每次都输入 在postman的Params中,输入一个左大括号,会显示三种随机数: 也可以在body中设置 随机数如下: {{$guid}}:添加 ...
- shiro框架学习-9-shiroSession
1.什么是会话session : 用户和程序直接的链接,程序可以根据session识别到哪个用户,和javaweb中的session类似 2. 什么是会话管理器SessionManager : 会话管 ...
- 数据科学20个最好的Python库
Python 在解决数据科学任务和挑战方面继续处于领先地位.去年,我们曾发表一篇博客文章 Top 15 Python Libraries for Data Science in 2017,概述了当时业 ...