1. canvas的使用步骤

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    1. <!--创建一个canvas标签，并且指定他（画布）的大小-->
        <canvas id="mycanvas" width="200" height="200" style="border: 1px solid red;"></canvas>


       var canavas = document.getElementById("mycanvas");
        //1.拿到绘图上下文
        var context = canavas.getContext("2d");
        //2.画图
        context.beginPath();
        context.strokeStyle = "blue";
        context.lineWidth = 5;
        context.moveTo(50, 50);
        context.lineTo(200,50);
        context.stroke();

2.canvas的常用方法和属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//开启一条新的路径
  context.beginPath();
  //闭合路径
  context.closePath()
    //设置描边的颜色
    context.strokeStyle = "blue";
    //设置填充的颜色
    context.fillStyle = "red";
    //设置线和线之间的连接点的样式:miter(默认)、round、bevel
    context.lineJoin = "miter"
    //stroke表示描边
    context.stroke();
    //fill表示填充
    context.fill();
  //设置线帽的样式：(butt默认)、round、square 
    context.lineCap = "round";
  //设置虚线：实线20 虚线20 实线20 虚线20 ...
    ctx.setLineDash([20]);
    //设置虚线：实线10 虚线20 实线10 虚线20 ...
    ctx.setLineDash([10,20]);
    //设置虚线：实线10 虚线20 实线30 虚线10 实线20 虚线30...
    ctx.setLineDash([10,20,30]);
    console.log(ctx.getLineDash());
    /*
    lineDashOffset:
    如果是正数，设置的偏移是画线的反方向的偏移
    如果是负数，设置的偏移是画线的方向的偏移
    */
    ctx.lineDashOffset= -10;
1
2
3
4
5
6
7
非0环绕法则：
   /*
    在使用ctx.fill()判断哪个区域要不要填充的时候遵循的是非零环绕的规则：
    1.从需要判断是否要填充的区域开始随便拉一条线出去
    2.看所有和拉出去的那条线相交的点，方向顺时针+1，逆时针-1
    3.看上面第二步+1 和 -1后的结果。如果结果是0，则不填充。如果结果不是0，则填充
    */

3.基本图形绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 //自动描边的react
   ctx.strokeRect(100.5, 100.5, 200, 200);

   //手动描边的react
   ctx.rect(100.5, 100.5, 200, 200);
   ctx.stroke();

   //自动填充的react
   ctx.fillRect(100.5, 100.5, 200, 200);

   //清除指定区域的绘制的图像
   ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

//创建一个渐变的区域
    var linearGradient = ctx.createLinearGradient(100,100,500,100);
    linearGradient.addColorStop(0,'pink');
    linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');
    ctx.fillStyle = linearGradient;

 //arc(圆心x,圆心y,半径,起始角度,终止角度,顺时针 false/逆时针 true)
    ctx.arc(150, 150, 100, 0, Math.PI/2, false);
    ctx.stroke();
//绘制扇形
ctx.beginPath();
ctx.moveTo(300,300);
ctx.arc(300, 300, 100, 0, Math.PI/4, false);
ctx.closePath();
ctx.stroke();  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ctx.beginPath();
   ctx.strokeStyle = '#000';
   /*有文本的属性  尺寸 字体  左右对齐方式  垂直对齐的方式*/
   ctx.font = '40px Microsoft YaHei';
   /*左右对齐方式 (center left right start end) 基准起始坐标*/
   ctx.textAlign = 'center';
   /*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
   ctx.textBaseline = 'middle';
   var x0 = w / 2 - 0.5;
   var y0 = h / 2 - 0.5;
   //绘制文字
   var str = "您吃-,了吗";
   //填充文本
   ctx.fillText(str, x0, y0)
   //描边文本
   // ctx.strokeText(str,x0,y0)
/*获取文本的宽度*/
console.log(ctx.measureText(str).width);

1
2
3
4
5
6
7
8
9
10
11
//将canvas的绘图状态保存一份
    ctx.save();
 //还原canvas之前保存的状态
    ctx.restore();


var image = new Image();
    image.src = "./image/01.jpg";
    image.onload = function(){
        //三个参数：drawImage(图片对象,绘制在画布上的坐标 x y)
        // ctx.drawImage(image,100,100);
    //五个参数：drawImage(图片对象,绘制在画布上的坐标 x y,图片的绘制尺寸 会缩放)
    //ctx.drawImage(image,100,100,100,50);

    //九个参数: drawImage(图片对象,图片中的一个矩形区域 x y w h,画布中的一个矩形区域 x1 y1 w1 h1)
    //ctx.drawImage(image,0,0,228,220,100,100,100,100);
}


//ctx.translate(100,100);   //让坐标系平移100,100(坐标系原点会发生变化)
//ctx.scale(0.5,1);         //让坐标系x方向缩放0.5 (坐标系刻度会发生变化)
//ctx.rotate(Math.PI/6);    //跟随坐标系原点旋转30°！