1、绘制弧线的方法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x,y:圆心的坐标;
radius:圆心的半径;
startAngle:起始弧度(以横轴X为标准);
endAngle:终止弧度(以横轴X为标准);
anticlockwise: true表示逆时针,false表示顺时针;
注:arc方法中用到的角度是以弧度为单位,而不是度。
转换公式:var radians = (Math.PI/180)*degrees;
2、关于弧度的说明

相信看过图后,就很好理解了。
3、绘图实例--笑脸
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var can = document.getElementById('test');
if(can.getContext){
var cxt = can.getContext('2d');
cxt.beginPath();
cxt.arc(100,100,80,0,Math.PI*2,true);
cxt.moveTo(160,100);
cxt.arc(100,100,60,0,Math.PI,false);
cxt.moveTo(85,75);
cxt.arc(75,75,10,0,Math.PI*2,false);
cxt.moveTo(115,75);
cxt.lineTo(135,75);
cxt.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="test" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
代码显示的结果:

4、绘图实例--衣架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var can = document.getElementById('test');
if(can.getContext){
var cxt = can.getContext('2d');
cxt.beginPath();
cxt.arc(100,30,15,Math.PI,Math.PI*0.5,false);
cxt.lineTo(100,65);
cxt.lineTo(30,100);
cxt.arc(30,115,15,Math.PI*1.5,Math.PI*0.5,true);
cxt.lineTo(170,130);
cxt.arc(170,115,15,Math.PI*0.5,Math.PI*1.5,true);
cxt.lineTo(100,65);
cxt.stroke();
cxt.closePath();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="test" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
代码显示的结果:


- 大小: 14.4 KB

- 大小: 6.9 KB

- 大小: 2.6 KB
分享到:
相关推荐
### DOM Canvas 绘图知识点详解 #### 一、Canvas 基础介绍 **Canvas** 是 HTML5 ...以上是关于 DOM Canvas 绘图的基础知识点,涵盖了从获取 Canvas 元素到具体绘图命令的详细解释,希望对学习 Canvas 绘图有所帮助。
在本篇“canvas学习之API整理笔记(一)”中,我们主要关注的是Canvas的基本API,包括如何获取Canvas元素、创建画布以及如何在Canvas上绘制基本图形。 首先,要在HTML中使用Canvas,需要在页面中添加一个`<canvas>`...
【标题】"Canvas日本伞背景动画特效.zip"所涉及...这个压缩包提供的代码可能包含了一个使用Canvas绘制伞形,结合jQuery进行交互控制,并辅以CSS美化和增强视觉效果的完整网页动画实例,适合前端开发者学习和二次开发。
在这个“HTML5 Canvas飞机线条弧度飞行动画特效”中,我们主要探讨的是如何利用HTML5的Canvas API创建一个飞机沿着弧线飞行的动画特效。 首先,`index.html`是网页的入口文件,它包含了HTML结构,其中关键的部分是...
Canvas API提供了多种绘图方法,如`fillRect()`用于填充矩形,`strokeRect()`用于描边矩形,`beginPath()`、`moveTo()`、`lineTo()`等用于绘制路径,`arc()`用于绘制圆或弧线,`fill()`和`stroke()`分别用于填充和...
这些组件包括视图(Views)、自定义视图(Custom Views)、画布(Canvas)、路径(Path)、绘图颜色和渐变、动画以及纹理贴图等。 首先,**视图(Views)**是Android UI系统的基本构建块,它们负责在屏幕上显示内容...
2. **绘图基础**:在`onDraw()`中,我们将利用Canvas对象进行绘图。Canvas提供了各种绘制几何形状(如矩形、线条、弧线)、文本和位图的方法。例如,我们可以用`canvas.drawRect()`绘制笔记的背景,用`canvas....