html5 canvas 画布画圆

最新推荐文章于 2024-07-24 15:43:52 发布

转载最新推荐文章于 2024-07-24 15:43:52 发布 · 146 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gb2013-shangduoduo/p/3735967.html

文章标签：

#javascript #ViewUI

本文介绍了HTML5 canvas元素的基本概念及其在网页上绘制图像的功能。重点讲解了如何使用JavaScript API绘制圆形，包括参数说明和动态绘制圆弧的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 Canvas？

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

画布是一个矩形区域，您可以控制其每一像素。

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

浏览器支持

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

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

理解坐标

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

Canvas 实例：理解坐标

在canvas中的坐标如下：

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

参数说明:

x，y是圆心的坐标，

radius是圆的半径，

startAngle 圆的起始角度，

endAngle圆的结束角度，

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>canvas绘制圆形</title>
<style type="text/css">
*{margin:0; padding:0;}
#canvas-box{width:980px; margin:50px auto;}
#percent{color:#C00;}
#canvas{border:1px solid #900; margin:0 auto 0 auto;}
</style>
</head>

<body>
<div id='canvas-box'>
<p></p><b id="percent">50</b>%</p>
<canvas id="canvas" width="400" height="400" ></canvas>
</div>
<script type="text/javascript">
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();
</script>
</body>
</html>