HTML5 Canvas arc()函数讲解

最新推荐文章于 2021-06-26 14:10:44 发布
最新推荐文章于 2021-06-26 14:10:44 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： HTML5 文章标签： html5 八卦 border function ie 文档 
为大家介绍曲线的语法。 如果要创建一个圆形，我们可以使用arc()方法。



语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)

代码：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);



HTML5 Canvas Arc 说明：

HTML5 <wbr>Canvas <wbr>arc()函数讲解




八卦图示例代码：

程序效果如下：
HTML5 <wbr>Canvas <wbr>arc()函数讲解

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>无标题文档</title>

<!--下面excanvas.js需下载才能在IE下支持canvas-->

<!--[if IE]>

<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script>

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

<script src="excanvas.js"></script>

<![endif]-->

<script type="text/javascript">

window.onload = function(){

 var ctx = document.getElementByIdx_x_x_x("pic").getContext('2d');

 

 //绘制白色半圆的代码如下：

 ctx.beginPath();

 ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false);

 ctx.fillStyle="white";

 ctx.closePath();

 ctx.fill();

 

 //绘制黑色半圆的代码如下：

 ctx.beginPath();

 ctx.arc(200,200,80,Math.PI/2,1.5*Math.PI,false);

 ctx.fillStyle="black";

 ctx.closePath();

 ctx.fill();

 

 //绘制黑色小圆

 ctx.beginPath();

 ctx.arc(200,240,40,0,Math.PI*2,true);

 ctx.fillStyle="black";

 ctx.closePath();

 ctx.fill();

 

 //绘制白色小圆

 ctx.beginPath();

 ctx.arc(200,160,40,0,Math.PI*2,true);

 ctx.fillStyle="white";

 ctx.closePath();

 ctx.fill();

 

 //绘制白色小圆心

 ctx.beginPath();

 ctx.arc(200,160,5,0,Math.PI*2,true);

 ctx.fillStyle="black";

 ctx.closePath();

 ctx.fill();

 

  //绘制黑色小圆心

 ctx.beginPath();

 ctx.arc(200,240,5,0,Math.PI*2,true);

 ctx.fillStyle="white";

 ctx.closePath();

 ctx.fill();

 

 //绘制文字代码如下：

 ctx.save();

 ctx.fillStyle="black";

 ctx.globalAlpha="0.4";

 ctx.textAlign="center";

 ctx.font="32px Arial";

 ctx.shadowColor="rgba(0,0,0,0.4)";

 ctx.shadowOffsetX=15;

 ctx.shadowOffsetY=-10;

 ctx.shadowBlur=2;

 ctx.fillText('Hello Canavs',200,100);//IE不支持

 

 ctx.restore();

}

</script>

</head>



<body>

<canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;"></canvas>

</body>

</html>
appteam_vlctech
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
canvas学习心得之arcTo
海阔天空
10-28 2774
canvas提供画圆弧有两种方法，一个是arc，另一个就是arcTo，arc挺简单的，这里就不再说了，单说一下arcTo。         arcTo的作用是绘制介于两条切线之间的弧，语法是arcTo（x1,y1,x2,y2,r）,其中x1，y1是起始点的坐标，x2，y2是终点的坐标，r则是圆弧的半径。这里面有个很大的误区，一般的初学者看到这里，都会错误的判断起始点的位置，如图1所示：    
canvs中的arc方法详解
qq_43427385的博客
07-31 1147
arc的定义 在使用arc这个方法之前，你一定要知道arc方法中参数是代表什么意思 arc() 方法创建弧/曲线（用于创建圆或部分圆）。 提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2Math.PI。 提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。 绿色中心： arc(100,75,50,0Math.PI,1.5Math.PI) 红色起...
html arc位置,HTML5 arc的例子
weixin_35675138的博客
06-07 154
demo.htmlarcfunction init() {var canvas=document.getElementById('canvas');var ctx=canvas.getContext("2d");ctx.beginPath();ctx.arc(100,100,80,0,1.5*Math.PI,false);ctx.closePath();ctx.fillStyle="#ccc";...
Html5 Canvas之arc函数图示详解
weixin_33743661的博客
09-08 330
在不变换坐标系的情况下，arc函数画弧的方向如下图所示： 举例来说，arc(x,y,r,Math.PI/6,Math.PI/3,false);是以x,y为圆心，r为半径，从x正轴顺时针30度为起始角，到x正轴顺时针60度为终止角画弧； arc(x,y,r,Math.PI/4,Math.PI/2,true);是以x,y为圆心，r为半径，从x正轴逆时针45度为起始角，到x正轴顺时针90度为终止...
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
sinolzeng的专栏
10-14 1762
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。 arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以
html5 canvas 详细使用教程
08-31
这个教程将深入讲解如何使用HTML5 Canvas进行详细操作。 首先，Canvas元素是HTML5中引入的新特性，它是一个矩形区域，可以通过JavaScript的绘图方法在其中绘制图形。在HTML中，你可以这样创建一个Canvas元素： ```...
html5 canvas绘制几何图形动画特效
11-08
以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程操作。它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，...
使用html5 canvas 画时钟代码实例分享
09-28
在这个实例中，我们将详细讲解如何利用HTML5 Canvas创建一个实时更新的时钟。 首先，我们需要创建一个`<canvas>`元素在HTML中，作为绘图的画布。例如： ```html <canvas id="myCanvas" width="300" height="300">...
html5使用canvas绘制太阳系效果
12-14
在这个案例中，我们将详细讲解如何利用HTML5 Canvas来绘制一个动态的太阳系模型。 首先，我们需要在HTML文档中创建一个`canvas`元素，并为其指定ID、宽度和高度，以及黑色背景，如以下代码所示： ```html <canvas ...
js html5 canvas制作多个小球碰撞的动画效果
11-07
本教程将详细讲解如何利用JavaScript和HTML5的Canvas API来制作一个包含多个小球碰撞的动画效果。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，它是画布的基础，用于渲染图形。例如： ```html <!DOCTYPE ...
html5 canvas元素各种圆弧绘制
蛮牛呆呆的博客
12-16 2021
canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持html5dcanvas元素                       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
html5 canvas 原生 javascript 实现 饼状图 扇型方向 顺时针 语法和逆时针语法
银河系天城知识宝库_技术专家蒋浩宇
06-21 762
逆时针饼状图话扇子 60% 图片 code: var c = document.getElementById("canvasmain"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(100, 100); ctx.ar...
HTML5_CANVAS_ARC
MUTONG的博客
10-07 129
//获取canvas2d上下文 var ctx=document.getElementById("canvas").getContext('2d'); //开始 ctx.beginPath(); //画弧  ctx.arc(x,y,半径，弧度起始位置，弧度最终位置，方向（true:顺时针  false:逆时针）); ctx.arc(50,80,50,0,2*Math.Pi,false);...
初学canvas
qq_35119405的博客
02-01 511
1.Canvas 元素用于在网页上绘制图形。 2.创建Canvas元素 &lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt; 3.操作Canvas元素对象 3.1获取Canvas元素及创建Context对象 var c=document.getElementById("myCanvas"); var
html5,cxt.arc(100,100,30,0,Math.PI*2,true);
左岸卿风
08-24 5055
cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标.第三个参数是圆的半径.第四个参数代表圆周起始位置.0 PI就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆.第六个参数是一个布尔值,true是顺
canvas arcTo()用法详解
07-20 1407
今天，我们接着介绍CanvasRenderingContext2D对象的方法arcTo()的用法。 arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y
html语言arc属性,为要素图层设置 HTML 弹出窗口属性
weixin_42465158的博客
05-31 587
ArcGIS 中的许多地图图层都可用于访问要素的丰富的属性及其他信息。一种机制是，单击每个要素时显示一个 HTML 弹出窗口。这就潜在地提供了一种有效的方法来共享每个要素的 HTML 格式的信息(例如 Web 内容)。通过单击地图上的要素，用户可使用 HTML 弹出窗口访问格式化内容，包括基于 Web 的内容(例如 URL 引用的图形)。这些窗口特别适用于您将以包的形式与其他用户进行共享的图层，从...
html arc函数,d3.js arc()用法及代码示例
weixin_42376614的博客
06-26 491
d3.arc()函数用于生成可生成圆图的电弧发生器。它基于起始角度和终止角度之间的差异。用法:d3.arc();参数：该函数不接受任何参数。返回值：该函数返回电弧发生器函数。以下示例说明了D3.js中的d3.arc()函数：范例1：HTMLcontent="width=device-width,initial-scale=1.0"/>"https://d3js.org/d3.v6.min.j...
HTML5 Canvas 2.0增强版：圆角矩形绘制函数库
HTML5+Canvas+作图函数库2.0版本是金海龙（bigengineer@163.com）近期发布的一项更新，针对HTML5 Canvas技术提供了一系列增强的图形绘制函数。HTML5 Canvas是一个强大的HTML5 API，它允许网页开发者在浏览器上动态...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值