小白学canvas-圆，弧线，圆角矩形
2017-12-12 本文已影响0人
芥末海苔QAQ
圆形
- 调用 beginPath() 方法声明开始一个新路径
- 使用 arc(x,y,半径,开始角度,结束角度,anticlockwise) 画圆
（x,y）表示圆心坐标
角度泽勇用 度数*MAth.PI/180 来表示更为直观
anticlockwise是一个布尔值，默认为 false（顺时针），当为 true 时表示逆时针 - 使用 closePath()方法来闭合当前路径
- 使用 stroke()，fill() 方法将以上描述的状态显示出来
画只 小瓢虫
灯泡眼瓢虫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//封装
function $$(id){
return document.getElementById(id);
}
window.onload=function(){
//提取
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
//整圆绘制瓢虫身体
cxt.beginPath();
cxt.arc(125,95,45,0,360*Math.PI/180,true);
cxt.closePath();
//填充
cxt.fillStyle="black";
cxt.fill();
//半圆绘制瓢虫左边翅膀
cxt.beginPath();
cxt.arc(112,98,50,-75*Math.PI/180,105*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="black";
cxt.stroke();
//半圆绘制瓢虫右边翅膀
cxt.beginPath();
cxt.arc(138,98,50,-105*Math.PI/180,75*Math.PI/180,false);
cxt.closePath();
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="black";
cxt.stroke();
//小半圆绘制瓢虫头部
cxt.beginPath();
cxt.arc(125,74,40,-30*Math.PI/180,-150*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
//弧线绘制触须，arc方法
cxt.beginPath();
cxt.arc(90,45,30,0,-90*Math.PI/180,true);
//弧线绘制触须，arcTo()方法
cxt.moveTo(130,45);
cxt.arcTo(130,15,160,15,30);
//描边触须
cxt.strokeStyle="black";
cxt.stroke();
//触角上小球
cxt.beginPath();
cxt.arc(95,15,5,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(155,15,5,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
//灯泡眼
cxt.beginPath();
cxt.arc(111,43,4,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="yellow";
cxt.fill();
cxt.beginPath();
cxt.arc(139,43,4,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="yellow";
cxt.fill();
//左半边背上原点
cxt.beginPath();
cxt.arc(100,70,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(80,93,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(89,123,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(112,98,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
//右半边背上原点
cxt.beginPath();
cxt.arc(150,72,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(170,93,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(161,123,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
cxt.beginPath();
cxt.arc(138,98,8,0,360*Math.PI/180,true);
cxt.closePath();
cxt.fillStyle="black";
cxt.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
弧线 - 圆形一部分
上面的绘画中 触须 用到了圆形一部分的弧线，现在把它们单独提取出来看。
画弧线有两种方法，一种用act()，一种用actTo()
act(x,y,半径，开始角度，结束角度，布尔值) 方法
例：从0°到-90°逆时针画一条弧线，0*Math.PI/180可简写为0
act( )方法图解
cxt.beginPath();
cxt.arc(90,45,30,0,-90*Math.PI/180,true);
//添加closePath()起点终点间会有一条直线链接起来
//cxt.closePath();
cxt.strokeStyle="red";
cxt.stroke();
对比图
actTo(cx,cy,x2,y2,圆弧半径) 方法
- 由moveTo()或lineTo()确定弧线起始点，可先画一条线段，再接弧线
如起始点距离弧线有一段距离，将会自动补上线条，对于处女座应该忍不了 - 确定起始、终止两点处切线交汇点：控制点坐标(cx,cy)
- 确定终止点坐标(x2,y2)
例：起始点为(130,45)，控制点为(130,15)，结束点为(160,15)，半径为30的一段弧
arcTo()方法举例图解
cxt.beginPath();
cxt.moveTo(130,45);
cxt.arcTo(130,15,160,15,30);
cxt.strokeStyle="blue";
cxt.stroke();
如两根线的样式相同，可描述玩路径后，再进行显示步骤
圆角矩形函数封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
window.onload=function(){
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
//roundRect(cxt,长，高,圆角半径,左上角顶点x坐标,左上角顶点y坐标)
roundRect(cxt,170,90,20,40,30);
cxt.strokeStyle="red";
cxt.stroke();
}
//圆角矩形封装函数
function roundRect(cxt,width,height,r,lefttopX,lefttopY){
cxt.beginPath();
cxt.moveTo(lefttopX+r,lefttopY);
cxt.lineTo(lefttopX+width-r,lefttopY);
cxt.arcTo(lefttopX+width,lefttopY,lefttopX+width,lefttopY+r,r);
cxt.lineTo(lefttopX+width,lefttopY+height-r);
cxt.arcTo(lefttopX+width,lefttopY+height,lefttopX+width-r,lefttopY+height,r);
cxt.lineTo(lefttopX+r,lefttopY+height);
cxt.arcTo(lefttopX,lefttopY+height,lefttopX,lefttopY+height-r,r);
cxt.lineTo(lefttopX,lefttopY+r);
cxt.arcTo(lefttopX,lefttopY,lefttopX+r,lefttopY,r);
cxt.closePath();
}
</script>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
圆角矩形
