html画布里面画圆,html5 canvas 画布画圆

什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。javascript

画布是一个矩形区域,您能够控制其每一像素。css

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。html

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。java

ps:Internet Explorer 8 以及更早的版本不支持 标签。canvas

理解坐标

在canvas中,画布的 X 和 Y 坐标用于在画布上对绘画进行定位,画布的左上角为坐标原点(0,0)。api

8d060bf2ba4245ebb2acda2c.html

在canvas中的坐标以下:浏览器

8d060bf2ba4245ebb2acda2c.html

在Canvas中用来绘制圆形的javascript api函数为arc(x,y,radius,startAngle,endAngle,antiClockwise(Boolean));函数

参数说明:ui

x,y是圆心的坐标,htm

radius是圆的半径,

startAngle 圆的起始角度,

endAngle圆的结束角度,

antiClockwise 圆绘制的顺序,默认为顺时针,为true时是逆时针,这只是是内部绘制的顺序不同而已,显示的效果是同样的.

如绘制一个完整的圆形时:canvas.arc(50,50,25,0,2*Math.PI);

咱们能够根据某个值来动态绘制圆弧的长度,只要把圆的结束角度设置为动态的便可。如根据某个百分比数据来绘制一个统计某个数据的圆弧,假设是满意度为50%,那么圆的结束角度为0.5*2*Math.PI.这样既可画出一个半圆了。

canvas绘制圆形

*{margin:0; padding:0;}

#canvas-box{width:980px; margin:50px auto;}

#percent{color:#C00;}

#canvas{border:1px solid #900; margin:0 auto 0 auto;}

50%

var p=document.getElementById('percent').innerHTML;

p=p/100;

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

canvas.beginPath();

canvas.arc(200,200,100,0,2*Math.PI);

canvas.strokeStyle='#f00';

canvas.lineWidth=2;

canvas.stroke();

canvas.closePath();

canvas.beginPath();

canvas.arc(50,50,50,0,p*2*Math.PI);

canvas.strokeStyle='#00f';

canvas.lineWidth=2;

canvas.stroke();

canvas.closePath();

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值