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所有的基础知识,并且有众多练习案例, ...
随机推荐
- ng-model 和ng-bind的区别
也就是说 ng-model是绑定html输入的值-->到控制器的变量,输入值变了,控制器对应的变量message的值页变了,这样,在其他地方就可以使用这个变化后的值 ng-bind 是绑定控制器 ...
- VM架构设计文档初稿v0.01
VM架构设计文档初稿v0.01 文档介绍 本文档是经过讨论,作为VM新架构设计开发中的重要依据.对该架构的整个系统的结构进行详实细致的描述.阐述框架结构,说明该架构所采取的设计策略和所有技术,并对相关 ...
- Python之网路编程利用multiprocessing开进程
一.multiprocessing模块介绍 python中的多线程无法利用CPU资源,在python中大部分情况使用多进程.python中提供了非常好的多进程包multiprocessing. mul ...
- jQuery后续和 前端框架Bootstrap
目录 一.jQuery后续 1. 动画效果 (1)自定义点赞动画实例 2. jQuery的自带方法 (1)each (类似for循环) (2)data() (存放隐形的数据) 二.前端框架之Boots ...
- Django对中间件的调用思想、csrf中间件详细介绍、Django settings源码剖析、Django的Auth模块
目录 使用Django对中间件的调用思想完成自己的功能 功能要求 importlib模块介绍 功能的实现 csrf中间件详细介绍 跨站请求伪造 Django csrf中间件 form表单 ajax c ...
- IntelliJ IDEA 2019.3激活破解教程(亲测有效,可激活至 2089 年)
IntelliJ IDEA 2019.3激活破解教程(亲测有效,可激活至 2089 年) 所有软件安装位置,作者均在无中文.无空格目录下进行操作的 IntelliJ IDEA 2019.3激活破解教程 ...
- 14.django返回展示一张图片
urlpatterns = [ path('admin/', admin.site.urls), # 使用django返回一张土图片的时候需要间接的访问一个中间接口,是html页面的中的img的src ...
- sh_08_打印分隔线
sh_08_打印分隔线 def print_line(char, times): print(char * times) print_line("hi ", 40)
- Selenium 上手:Selenium扫盲区
Selenium 自述Selenium 是由Jason Huggins软件工程师编写的一个开源的浏览器自动化测试框架.主要用于测试自动化Web UI应用程序. Selenium 工作原理通过编程语言( ...
- substring()方法是如何工作
1.substring()方法做了什么? substring(beginIndex,endIndex)方法返回一个从beginIndex到endIndex-1的字符串 String x = " ...