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

男娘i 2022-10-06 09:49 173阅读 0赞

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

![cb07127d54d288dcf4c963178817bd5a.png][]

![97c887940b8e36c29396f8a75e19d7dd.png][]

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

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

![9fb968f526edab3ed87abb058727a6eb.png][]

![9734c184957f98d81524a96232d733d6.png][]

画两个不同颜色的圆形：

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

![7ec937633ed26734dc9083252be9e4c7.png][]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

JSP中request getParameter和getAttribute不同&lpar;转载&rpar;

(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使用国内镜像&sol;源的方法

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

&commat;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&quest;

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

ubuntu14&period;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&comma; time is always now&excl;&excl;&excl;&excl;

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

[cb07127d54d288dcf4c963178817bd5a.png]: /images/20221005/db1c221125724529918d24f21e512f87.png
[97c887940b8e36c29396f8a75e19d7dd.png]: /images/20221005/99c9c7abd91c4e4cb90ddfcc6ec24fb0.png
[9fb968f526edab3ed87abb058727a6eb.png]: /images/20221005/136baf7271ea4bc9a7a9d8c1d971206e.png
[9734c184957f98d81524a96232d733d6.png]: /images/20221005/97842b9fc72347fa8cec890f6cd51b62.png
[7ec937633ed26734dc9083252be9e4c7.png]: /images/20221005/c735f8ae8a92445cabb49804dab0b945.png