使用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又分为两部分,一半绘制弧形,一半为直线。*/
使用canvas元素-art方法绘制圆弧的更多相关文章
- 【温故而知新-Javascript】使用canvas元素(第二部分)
本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...
- 【高级功能】使用canvas元素(第二部分)
本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- -_-#【Canvas】导出在<canvas>元素上绘制的图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- canvas绘制圆弧
canvas绘制圆弧 方法 anticlockwise为true表示逆时针,默认为顺时针 角度都传的是弧度(弧度 = (Math.PI/180)*角度) arc(x, y, radius, start ...
- HTML5图形绘制学习(1)-- Canvas 元素简介
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...
- HTML5 Canvas绘图系列之一:圆弧等基础图形的实现
之前的一个微信项目已经要结项了,最近整理一下项目中使用较多的canvas画图方面的知识吧,打算写个3,4篇的样子.本篇主要介绍基础操作和弧线画法. 之后再写一下趋势图,直方图,文本图像处理的. 言归正 ...
- 【高级功能】使用canvas元素(第一部分)
1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...
- wpf 后台绘制圆弧
wpf 前台绘制圆弧很简单,如:<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness=& ...
随机推荐
- Socket Receive 避免 Blocking
我们知道 Socket Blocking 属性默认true . 表明Socket 处于同步调用 , Connect , 或 Send , Receive 需等待动作 完成才能继续执行. 有一种应用场景 ...
- Text Justification
在一段时间没刷题之后,我发现脑子严重地滞涩了.这题AC花了好大力气,出现了Memory Limit Exceed,Core Dump,以及各种普通的编译.运行错误.MLE 和 CD错误是比较难检查的, ...
- 在easyui的treeGrid中添加checkbox(jquery)
jsp界面,也可用在aspx.html等前台界面中: <script type="text/javascript"> function show(checkid){ v ...
- Html标签第二课css
css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div style=& ...
- [转]查看Flash Log输出
1.安装Debug版本的FlashPlayer 2.mm.cfg配置文件 xp:C:\Documents and Settings\username\mm.cfg Vista/7: C:\users\ ...
- AngularJs的UI组件ui-Bootstrap分享(六)——Tabs
tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo ...
- 关于C语言的问卷调查(作业三)
1.你对自己的未来有什么规划?做了哪些准备? 答:我对我未来的规划就是希望能够学有所用,将来可以从事有关IT方面的,跟自己的专业对口.为此现在我需要多看一些和这个专业有关的书籍,自学一些知识,多些一些 ...
- Java 单列模式(Singleton)
单例模式(Singleton) 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 目的:使得类的一个对象成为系统中的唯一实例. 如何保证一个类只有一个实例并且这个实例易于被访问呢? 我们都 ...
- canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
- 应用间共享数据方法(一)---sharepreferce
SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. SharedPreferences保存数据,其背后是用xml文件存放数据,文件存放在/data/data/ ...