使用canvas元素-art方法绘制圆弧

最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作。我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识。

首先看这段代码:

var ctx=document.getElementById("canvas").getContext("2d");

/*这是调用HTMLCanvasElement对象的getContex方法,为画布返回绘图上下文,这里是采用2d上下文

ctx.fillStyle="yellow";
        ctx.strokeStyle="black";

/*这两句代码是设置填充和笔触样式,这里就是为你绘制图形填充颜色,实心的就调用fillStyle,空心的就调用strokeStyle,相对应的图形文字的实心空心样式就不提了

ctx.lineWidth=3;

/*这是用于绘制线条的宽度

ctx.strokeRect(250,20,100,200);

/*这是绘制一个空心的矩形,第一个参数和第二个参数表示从canvas元素左上角算起的偏移值,后两个参数代表矩形的宽和高。

/*接下来就是用路径绘图的部分了,稍微提一下绘制一条路径的基本顺序:

调用beginPath方法;

用moveTo方法移动起点;

用arc和lineTo等方法绘制子路径;

调用closePath方法(可选),这个方法主要用于闭合所画的路径

调用fill和stroke方法,这里是填充,上面提到的closePath会对stroke绘制的线条有影响*/

/*这里是调用arc方法绘制圆弧,也是本文的重点哦

ctx.beginPath();
        ctx.arc(70,70,60,0,Math.PI*2,true);

/*这里要注意canvas里面的角度并不是用数学里面的度数来表示的而是用弧度,例如360度就是2*Math.PI

ctx.stroke();

ctx.fill();

看上面这段代码,首先讲讲arc的参数。arc(x,y,rad,startAngle,endaAngle,direction),x,y代表的圆弧的圆心,第三个参数代表圆弧的半径,第四个代表起始的角度,第五个代表结束的角度,最后一个代表圆弧的方向,这里默认的是顺时针方向。值得注意的是,这里direction参数的意思是是否是逆时针方向,所以当把这个参数设为true时,就变成了逆时针方向。这其中的区别后面详细讲解

上面这段实际上是画了一个整圆

注意,这里的起始角度和数学里面差不多,你把你的圆当一个坐标以圆心为原点,0就是X轴的正半轴开始

这里的最后一个参数为true时,表示逆时针方向,第四个参数和第五个参数表示从90度到180度,注意这里的角度起始点和终止点还是按照普通坐标轴的顺时针来的(这里不要跟数学里的搞混了,例如Y轴的负半轴表示2/Math.PI,X负半轴表示Math.PI.逆时针方向表示的意思是弧度的方向,就如同下图中线条的方向。

ctx.beginPath();
        ctx.arc(200,70,60,Math.PI/2,Math.PI,true);
        ctx.fill();
        ctx.stroke();

演示一个为false的

ctx.beginPath();
        ctx.arc(200,70,60,Math.PI/2,Math.PI,flase);
        ctx.fill();
        ctx.stroke();

这些都掌握了,就可以利用一些技巧来绘制一些有意思的图形了,例如:

ctx.beginPath();
        var val=0;
        for(var i=0;i<5;i++){
           ctx.arc(350,70,60,val,val+Math.PI/4,false);
           val+=Math.PI/2;
        }
        ctx.closePath;
        ctx.fill();
        ctx.stroke();

/*这个图形就是把整个圆分为四部分,在循环里面每次移动2/Math.PI,而这每一个2/Math.PI又分为两部分,一半绘制弧形,一半为直线。*/

时间: 2024-10-16 04:20:38

使用canvas元素-art方法绘制圆弧的相关文章

【温故而知新-Javascript】使用canvas元素(第二部分)

本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1. 用路径绘图 路径本质上是一组独立的线条(被称为子路径),它们组合到一起构成图形.我们绘制子路径的方式就像用笔在纸上画图一样,笔尖不离开纸面:画布上的每一条子路径都以上一条的终点作为起点.下面展示了绘制基本路径的方法: 绘制一条路径的基本顺序如下: * 调用 beginPath方法: * 用 mo

【高级功能】使用canvas元素(第二部分)

本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1. 用路径绘图 路径本质上是一组独立的线条(被称为子路径),它们组合到一起构成图形.我们绘制子路径的方式就像用笔在纸上画图一样,笔尖不离开纸面:画布上的每一条子路径都以上一条的终点作为起点.下面展示了绘制基本路径的方法: 绘制一条路径的基本顺序如下: * 调用 beginPath方法: * 用 mo

HTML5中canvas元素,绘制圆形

HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. <!DOCTYPE html> <head> <meta charset="UTF-8" /> <script>     function draw(id) {         var canvas = document.getElementById(id);         if (canvas == nu

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

HTML5 &lt;canvas&gt; 元素用于图形的绘制,通过脚本(通常是javascript)完成

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形 可以通过多种方法使用canvas绘制路径\盒\圆以及添加图像 创建一个画布(Canvas) 一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制. 注意: 默认情况下 <canvas> 元素没有边框和内容. <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100&

canvas 元素用于在网页上绘制图形。

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200" height="100"></canv

canvas绘制圆弧

canvas绘制圆弧 方法 anticlockwise为true表示逆时针,默认为顺时针 角度都传的是弧度(弧度 = (Math.PI/180)*角度) arc(x, y, radius, startAngle, endAngle, anticlockwise) arcTo(x1, y1, x2, y2, radius) 画实心圆弧 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

HTML5图形绘制学习(1)-- Canvas 元素简介

Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制,而是要利用javascript在其中进行进行操作. 这里做个简单的canvas实例: 1.在页面中添加canvas元素 首先在页面中添加canvas元素,需要给定其高度.宽度和唯一标识id<!doctype html> <html lang="en"> <he