一、创建路径
创建路径的步骤：
标识开始创建路径—设置图像属性—（标识结束创建路径）—绘制图像
1、标识路径的方法
beginPath()—表示开始创建路径(不可缺省)
closePath()—表示结束创建路径(可以缺省)
当绘制不完整图形时，如果使用closePath()方法图像会有闭合效果
2、设置图像的方法
rect(x,y,width,height)—设置矩形
arc(x,y,radius,startAngle,endAngle,direction)—设置圆形
x,y—圆心坐标
radius—半径
startAngle—创建路径的起点(0)
endAngle—创建路径的终点(PI*2)
endAngle—创建路径的终点(PI*2)
direction—boolean值,表示绘制圆形是顺时针还是逆时针，默认为false，表示顺时针
*startAngle和endAngle可取的值为0-PI*2*
3、绘制图像的方法
stroke()—绘制轮廓
fill()—绘制实心图像
clip()—截取图像，只有矩形或圆形内的图像保留
fill()—绘制实心图像
clip()—截取图像，只有矩形或圆形内的图像保留
小案例（绘制太极图）：
<!DOCTYPE HTML>
<html>
<head>
<title>一个大大的八卦</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" width="800px" height="800px"></canvas>
</body>
<script>
var canvas=document.getElementById("canv");
var ctx=canvas.getContext("2d");
//绘制完整圆形--空心
<html>
<head>
<title>一个大大的八卦</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" width="800px" height="800px"></canvas>
</body>
<script>
var canvas=document.getElementById("canv");
var ctx=canvas.getContext("2d");
//绘制完整圆形--空心
最低0.47元/天 解锁文章
5519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
