前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...

arc：画弧度

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

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

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

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

第五个参数：true为逆时针，false为顺时针，默认值为false

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

body {

background: #000;

}

#canvas{

background:white;

}

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();

}

如果是顺时针，就用这段：

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

                                

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

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();

                           

画两个不同颜色的圆形：

body {

background: #000;

}

#canvas{

background:white;

}

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();

}

画两个填充圆形，把上面的例子，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();

画一个圆角：

body {

background: #000;

}

#canvas{

background:white;

}

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();

}

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

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

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

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

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

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

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

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

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

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

[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

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

[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

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

随机推荐

JSP中request getParameter和getAttribute不同(转载)

(1)request.getParameter()取得是通过容器的实现来取得通过类似post,get等方式传入的数据,,request.setAttribute()和getAttribute()只是在 ...

Android笔记：真机调试

参考:android通过USB使用真机调试程序 手机:华为Y511-U00 1.将手机USB调试模式连接到PC(直接用数据线连接到PC一般可以自动切换) 2.连接成功后提示安装驱动,我选择的是自动安装 ...

Delphi的Socket编程步骤

ClientSocket 和ServerSocket几个重要的属性:   1.client和server都有port属性,需要一致才能互相通信   2.client有Address属性,使用时填写对方 ...

pip使用国内镜像/源的方法

一.修改配置文件 pip配置文件的路径如下,没有的话新建一个: linux/msys2等是:用户目录/.pip/pip.confwindows是:用户目录/pip/pip.ini 用户目录通过下行命令 ...

@font-face的用法

几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是: @font-face { font-family: 'MyWebFont'; src: url('webfont.e ...

shutil、zipfile，tarfile

shutil 模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作. 1. shutil.copyfileobj(fsrc, fdst[, length]) 功 ...

【树莓派】GSM900模块

python代码 https://github.com/JFF-Bohdan/sim-module

What are the advantages of different classification algorithms?

What are the advantages of different classification algorithms? For instance, if we have large train ...

ubuntu14.04 64 位 vmware tools 问题

当提示说open-vm-tools版本太低时可以这样解决 1.sudo apt-get autoremove open-vm-dkms open-vm-tools --purge 2.安装vmware ...

time is always a factor, time is always now!!!!

https://www.linkedin.com/pulse/time-always-now-joe-alderman ---------------------------------------- ...