Canvas之1绘制线条的有关属性和步骤

501 字

3 分钟

Canvas之1绘制线条的有关属性和步骤

2017-06-08

<canvas id="" width="" height=""></canvas> canvas 在页面上绘制图形用的（通常称他画布） canvas只是一个容器，我们用js脚本来控制他 <canvas id="draw" width="600" height="500" style="border: 1px solid #ccc;"></canvas>

绘制线条的有关属性和步骤#

1.相关属性

1.填充的样式
- cvs.fillStyle --> fillStyle`填充样式
- cvs.strokeStyle --> strokeStyle笔触样式主要用来画边框的
- cvs.lineWidth --> 边框的宽度
2.绘制图形有两种方式
- cvs.fill(); --> 填充样式
- cvs.stroke(); --> 边框样式
3.颜色值的四种书写方式
- 1).颜色名 —>“red”
- 2).十六进制 —>“#fff”
- 3).三色值 —>rgb(0,0,0)
- 4).四色值 —>rgba(0,0,0,0.3)
4.坐标:
- 1.)以画布为基准,距离画布的上边是y坐标值(top值),距离画布的左边是x坐标值(left值);
- cvs.moveTo(x,y); —> 起始点坐标
- cvs.lineTo(x,y); —> 结束点的坐标
- 如果没有moveTo就把上一个挨着的lineTo作为起始坐标
- 例如<假如第一个不是moveto而是lineto>,那么lineTo就是其实坐标
5.开始和关闭一个路径
- cvs.beginPath(); —> 开始一个新的路径
- cvs.closePath(); —> 关闭当前路径
- 注意<加上>.closePath会自动闭合会自动连接起始坐标和结束坐标
6.canvas中的圆角
- 1).设置线条交汇处的样式
- cvs.lineJoin 他有三个属性：
  - 1).尖角miter
  - 2).斜角bevel
  - 3).圆角round
- 2).设置一条线段两端点的样式
- lineCap焦点样式
  - 1)平的butt(默认值)
  - 2.)圆角round
  - 3.)方角square

2.步骤及案例

步骤1.获取出canvas标签,例如: var draw=document.getElementById('draw');
步骤2.设置绘制环境—2d 平面图,例如:

1
var cvs=draw.getContext('2d');
2
//cvs 这个就是你的画板 接下来就可以在cvs上进行绘制

步骤3
案例1<线段>

1
  function draw1(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.moveTo(50,50);
6
  cvs.lineTo(150,50);
7
  cvs.closePath();
8
  cvs.strokeStyle='#800080';
9
  cvs.lineWidth=5;
10
  cvs.stroke();//以边框的形式显示
11
  }
12
  draw1();

案例2<等腰直角三角形>

1
function draw2(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.lineTo(80,120);
6
  cvs.lineTo(80,240);
7
  cvs.lineTo(200,240);
8
  cvs.closePath();
9
  cvs.strokeStyle='ec568c';
10
  cvs.lineWidth=10;
11
  cvs.stroke();
12
}
13
draw2();

案例3<圆角矩形>

1
function draw3(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.lineCap='round';
6
  cvs.lineTo(50,50);
7
  cvs.lineTo(250,50);
8
  cvs.closePath();//关闭就没有圆角效果
9
  cvs.lineWidth=100;
10
  cvs.strokeStyle='#896446';
11
  cvs.stroke();
12
}
13
draw3();

案例4<圆角三角形>

1
function draw4(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.lineJoin='round';//设置圆角
6
  cvs.moveTo(200,100);
7
  cvs.lineTo(100,250);
8
  cvs.lineTo(300,250);
9
  cvs.closePath();
10
  cvs.lineWidth=50;
11
  cvs.strokeStyle='#896446';
12
  cvs.stroke();
13
}
14
draw4();