Canvas_cavas float-CSDN博客

canvas通过js在网页上绘制图像。是一个矩形区域，可以绘制路径，矩形，圆形等。
1.创建canvas对象、

    <canvas id="mycan" width="300" height="300"></canvas>
    //画布是白色的，且有默认大小为宽300高150，此属性非css属性,不建议在样式属性中设置

2.获取canvas渲染上下文，简称画笔

        var ctx = mycan.getContext('2d');

绘制直线
1.开始：

beginPath()   //开始定义路径
closePath()  //关闭前面定义的路径
moveTo(float x,float y)   // 把 canvas 的当前路径的结束点移动到 x, y 对应的点
lineTo(float x,float y)   //把 canvas 的当前路径从当前结束点连接到 x , y 对应的点

注意：
1.moveTo 可以简单理解为，把当前绘制图像的起点设置为某一特定坐标
2.而 lineTo 则是将当前的起点和你想要设置的那个点之间连接起来。
3.而 beginPath 是表示开始定义路径，不会产生特殊的效果， closePath 除了表示关闭当前定义的路径之外，还会有一个特殊的作用，就是可以将当前绘制图形的最后一个点和我们绘制图形开始的点进行连接。
当然，如果你只需要画一条线，不去加beginPath 和 closep 你的内容实际也是可以出来的，但是推荐加上。
2.填充

fill()	  //填充 canvas 当前路径闭合区域
stroke()	//填充 canvas 当前路径
//修改样式
fillStyle()	//设置填充 canvas 路径所使用的填充风格
strokeStyle()	//设置绘制 canvas 路径的填充风格
lineWidth()	//设置笔触线条的宽度

绘制三角形

1.绘制步骤

    // 开始绘制
    ctx.beginPath();
    
    //设置绘制起点
    ctx.moveTo(100,100);
    
    //设置绘制下一个点
    ctx.lineTo(700,400);

    //设置绘制下一个点
    ctx.lineTo(400,100);
    
    //结束绘制
    ctx.closePath();

结果显示：一个三角形。
补充：代码中只lineTo了两条线，可因为closePath()语句，图形自动闭合，会在第二个点结束之后自动连接到moveTo的坐标点，即初始点。这样图形就闭合了。
2.填充样式：

// 设置填充样式
    ctx.fillStyle = "green";

    // 填充当前视图
    ctx.fill();

3.交点样式

lineJoin//设置返回所创建边角的类型，当两条线交汇时。
属性：
bevel	创建斜角
round	创建圆角
miter	默认，创建尖角

绘制矩形

strokeRect(float x,float y,float width,float height)	绘制一个矩形边框
fillRect(float x,float y,float width,float height)	填充一个矩形，默认黑色

注意：给矩形设置样式的时候，要先于绘制。

绘制字符串

fillText(String Text, float x, float y, [float maxWidth])	填充字符串
strokeText(String Text, float x, float y, [float maxWidth])	绘制字符串边框
textAlign	设置绘制字符串的水平对齐方式(start、end、left、right、center等)
textBaseAlign	设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)

绘制圆弧

arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise)
向 canvas 的当前路径上添加一段弧。绘制以 x ， y 为圆心，radius 为半径，从 startAngle 角度开始，到 endAngle 角度结束的圆弧。startAngle 和 endAngle 以角度为单位。

arcTo(float x1,float x2,float y1,float y2,float radius)
向 canvas 的当前路径上添加一段弧。与上一个方法不同的地方只是定义弧的方式不同。

bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y)
在当前路径上添加一段贝塞尔曲线

quadraticCurveTo(float cpX, float cpY,float x,float y)
向 canvas 当前路径添加一段二次贝塞尔曲线

rect(float x, float y,float width, float height)
向 canvas 的当前路径上添加一个矩形