[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

时间:2022-08-24 07:53:12

绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解.

arc:画弧度

cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 );

x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心.

开始角度与结束角度都是以弧度单位,弧度与角度的换算关系为: 弧度=角度*(π/180°)。

以时钟为参考,3点钟方向为0度,6点钟方向为90度,9点钟方向为180度,12点钟方向为270度.

第五个参数:true为逆时针,false为顺时针,默认值为false

在canvas的中心,换一个从0度方向开始,逆时针到270度方向的一段圆弧:

 <style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, true );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>

如果是顺时针,就用这段:

oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, false );
 
[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)                                [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

如果采用闭合路径,弧度的起始点就会相连

 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, true );
oGc.closePath();
oGc.stroke();
 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, false );
oGc.closePath();
oGc.stroke();

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)                           [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

画两个不同颜色的圆形:

 <style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.beginPath();
oGc.strokeStyle = '#09f';
oGc.arc( 150, 150, 150, 0, 360 * Math.PI / 180 );
oGc.closePath();
oGc.stroke(); oGc.beginPath();
oGc.strokeStyle = 'orange';
oGc.arc( 450, 150, 150, 0, 360 * Math.PI / 180 );
oGc.closePath();
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>

画两个填充圆形,把上面的例子,stoke方式改成fill方式即可.

     oGc.beginPath();
oGc.fillStyle = '#09f';
oGc.arc( 150, 150, 150, 0, 360 * Math.PI / 180 );
oGc.closePath();
oGc.fill(); oGc.beginPath();
oGc.fillStyle = 'orange';
oGc.arc( 450, 150, 150, 0, 360 * Math.PI / 180 );
oGc.closePath();
oGc.fill();

画一个圆角:

 <style>
body {
background: #000;
}
#canvas{
background:white;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ); oGc.moveTo( 150, 50 );
oGc.lineTo( 250, 50 );
oGc.stroke(); oGc.beginPath();
oGc.arc( 250, 100, 50, 270 * Math.PI / 180, 0, false );
oGc.moveTo( 300, 100 );
oGc.lineTo( 300, 200 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)的更多相关文章

  1. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - arcTo&lpar;弧度与二次&comma;三次贝塞尔曲线以及在线工具&rpar;

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  2. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  3. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 图片操作&lpar;drawImage&comma;clip&comma;createPattern&rpar;

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  4. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 文本样式&lpar;strokeText&comma;fillText&comma;measureText&comma;textAlign&comma;textBaseline&rpar;

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  5. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 线条样式&lpar;lineWidth&comma;lineCap&comma;lineJoin&comma;setLineDash&rpar;

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  6. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 像素操作&lpar;反色&comma;黑白&comma;亮度&comma;复古&comma;蒙版&comma;透明&rpar;

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  7. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 状态详解&lpar;save与restore&rpar;

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  8. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 线形渐变&comma;径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  9. &lbrack;js高手之路&rsqb; html5 canvas系列教程 - 认识canvas以及基本使用方法

    canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...

随机推荐

  1. HDU 1257 最少拦截系统【LIS】

    题意:类似于套娃娃,问最少需要多少个拦截系统. 思路: 假设已经有m个导弹拦截序列 r1:x11>=x12>=x13>=...>=x1n r1:x21>=x22>= ...

  2. html之marquee详解

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...

  3. JS获取当前日期时间及JS日期格式化

    Js获取当前日期时间: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份( ...

  4. innerHTML与appendChild&lpar;newnodeText&rpar;的区别

    innerHTML和createTextNode都可以把一段内容添加到一个节点中,区别是如果这段内容中有html标签时表现就不同了,在createTextNode中会当作文本处理,不会被浏览器解析,但 ...

  5. trove,测试,db小解析

    # Copyright 2014 Tesora Inc.# All Rights Reserved.## Licensed under the Apache License, Version 2.0 ...

  6. iOS开发——生成条形码,二维码

    - (void)viewDidLoad { [super viewDidLoad]; self.imageView.image = [self generateBarCode:@"15248 ...

  7. springmvc配置之mvc&colon;annotation-driven

    为了简化springmvc配置,spring同时引入了mvc namespace, 配置了 <mvc:annotation-driven/> spring会默认注册a RequestMap ...

  8. WebService学习-第一弹

    一:WebService简介(1)简介----百度百科(注意标识的重点) Web service是一个平*立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言 ...

  9. uva1653

    本来想刷道签到题结果被卡住了.这题题意描述有点问题,数字又不一定都是个位数...难道是我英语太差了? digits就表示0~9这几个数?唉,还是太弱了.这题就是用了一个bfs,应该说还是有点意思的,直 ...

  10. Struts 2&lpar;二&rpar;

    一,框架的扩展名问题: ,struts2框架的默认扩展名:.action和空字符串.在框架的属性文件default.properties中进行默认配置:struts.action.extension= ...