canvas绘制路径

2.画布api
canvas.getContext("2d");
canvas.width
canvas.height

               var ctx = canvas.getContext("2d");
                canvas.width=552;
                canvas.height=800;

 

 


3.上下文api
ctx.fillRect(x,y,w,h):填充矩形
ctx.strokeRect(x,ymwmh):带边框的矩形
ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
注意原点的位置
ctx.fillStyle
ctx.strokeStyle
ctx.lineWidth

                var ctx=canvas.getContext("2d");
                    
                //设置图形的填充颜色               
                 
                    ctx.fillStyle = "blue";
                    //实心矩形
                   
                ctx.fillRect(0,0,100,100)
                //设置图形轮廓的颜色
                 ctx.strokeStyle = "blue";
                //带边框的矩形  
                // 100    : 99.5 --- 100.5(99-101)
                // 100.5: 100  --- 101 
                ctx.strokeRect(100.5,100.5,100,100)

 


ctx.lineCap

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
      </script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
         
    
         html,body{
                height: 100%;
                overflow: hidden;
                
            }
            body{
                background: greenyellow;
            }
          #test{
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom:0;
               margin: auto;
           background: gray;

              
          }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
        </canvas>
    </body>
      <script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
      </script>
</html>
View Code

 


ctx.lineJoin

 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）

ctx.lineJoin = "bevel";
ctx.lineJoin = "round";
ctx.lineJoin = "miter";
      <script type="text/javascript">
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");


ctx.lineWidth = 10;
ctx.lineJoin = "round";
//清楚子路径列表,开始新路径
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200, 100);
ctx.lineTo(300,0);
ctx.stroke();
      </script>
</html>

 

 

 


ctx.moveTo(x,y):将画笔抬起点到x，y处
ctx.lineTo(x,y):将画笔移到x，y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
ctx.quadraticCurveTo(x1,y1,x2,y2)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
必须经过起点和终点
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：控制点
x3，y3：结束点
必须经过起点和终点
ctx.fill()
ctx.stroke()

ctx.beginpath():清除路径容器

ctx.strokeStyle="red";
                ctx.lineWidth="3";
                ctx.moveTo(450,250);
                ctx.lineTo(550,50);
                ctx.lineTo(300,200);
                //绘制线段
                ctx.stroke();
                //闭合路径
                 ctx.closePath();
                 //充填内部
                 ctx.fill();

 


ctx.closepath():闭合路径
fill自动闭合


stroke需要手动闭合


ctx.save()
将画布当前状态(样式相关 变换相关)压入到样式栈中


ctx.restore()
将样式栈中栈顶的元素弹到样式容器中
图像最终渲染依赖于样式容器

ctx.save();
                //关于样式的设置
                //save  restore成对出现
                ctx.beginPath();
                //关于路径
                ctx.restore();
                
                
                ctx.save();
                //关于样式的设置
                ctx.beginPath();
                //关于路径
                
                ctx.fill();
                ctx.restore();

 

 


ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
ctx.scale(因子):
放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
画布中图像所包含的css像素的个数不变
缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
画布中图像所包含的css像素的个数不变

posted @ 2019-11-09 12:43  distant-遥远  阅读(387)  评论(0)    收藏  举报