html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环

前段时间的一个项目做到这个玩意，研究了一下绘制圆环的方法。最终使用HTML5的画布标签来做。arc()是HTML5 Canvas的一个API函数，作用是“创建弧/曲线(用于创建圆形或部分圆)”。本文先讲解如何绘制圆形以及一些应用。

1. javascript 语法

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

2. 参数值

参数

描述

圆的中心的 x 坐标。

圆的中心的 y 坐标。

圆的半径。

sAngle

起始角，以弧度计。(弧的圆形的三点钟位置是 0 度)。

eAngle

结束角，以弧度计。

counterclockwise

可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

3. 图解

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)

起始角：arc(100,75,50,0,1.5*Math.PI)

结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

4. 实例

创建一个圆形：

JavaScript:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();

5. 延伸案例

我们用6个图形组合成一个八卦的图形。

无标题文档

✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦

原文：前端博客

http://caibaojian.com/html5-canvas-arc.html

点击“阅读原文”，看更多

精选文章

↓↓↓

html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环相关推荐

iOS drawRect绘制圆形/圆环/饼图
效果如下图的圆,中间的内容可自己添加:隐藏中间白色的圆即是一个饼图调用方法: GradeView *gradeView = [[GradeView alloc] init]; gradeView.g ...
绘制圆形/圆环/扇形/扇面Mesh
using UnityEngine; using System.Collections;[RequireComponent(typeof(MeshRenderer), typeof(MeshFilte ...
H5canvas(绘制矩形，绘制圆形，绘制线段，绘制文字，绘制曲线)
Canvas简介 canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于 Gecko 1.8的浏览 ...
drawCircle方法：绘制圆形
drawCircle方法:绘制圆形 [功能说明]该方法用于在画布上绘制圆形,通过指定圆形圆心的坐标和半径来实现.该方法是绘制圆形的主要方法,同时也可以通过设置画笔的空心效果来绘制空心的圆形. [基本语 ...
前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
html5给图片加圆圈,js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色
脚本代码(For Alixixi.com)如下: Document body{ font-family: 微软雅黑; } canvas{ display:block; border:1px dotte ...
html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
html5 canvas绘制圆形印章，以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...

html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环

html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环相关推荐

最新文章

热门文章