cavas基本绘图

Posted on | In
canvas创建、基本绘图

创建canvas

1
<canvas id="canvas" width="800" height="600" style="border:1px solid black;margin:10px auto;display:block;"></canvas>

不要使用css给canvas设置宽高，会出现奇怪的效果(关于使用Css设置Canvas画布大小的问题),可以在js中设置宽高：

1
2
3
4
5
6
<script>
    var canvas = document.getElementById("canvas");
    canvas.height = 500;
    canvas.width = 500;
    var context = canvas.getContext("2d");
</script>

简单的绘制

  • 直线、多边形
1
2
3
4
5
context.moveTo(50,50);
context.lineTo(200,200);
context.lineWidth = 5; // 线条宽度
content.strokeStyle = "#005588" // 线条颜色
context.stroke();
  • 多变形着色
1
2
3
4
5
6
7
8
9
10
context.moveTo(50,50);
context.lineTo(200,200);
context.lineTo(50,200);
context.lineTo(50,50);
context.fillStyle = "rgb(2,100,24)";
context.fill();
// 给多边形加上外边框
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();
  • 绘制两条不同颜色的直线
1
2
3
4
5
6
7
8
9
context.moveTo(50,50);
context.lineTo(200,200);
context.strokeStyle = "blue";
context.stroke();

context.moveTo(60,50);
context.lineTo(300,200);
context.strokeStyle = "black";
context.stroke();


这里与教程不同，教程中两条直线都是黑色，需要用context.beginPath()和context.closePath()来区分不同的绘制路径（closePath会自动封闭图形）。但是，当绘制填充多边形时，会有如下问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// context.beginPath();
   context.moveTo(50,50);
   context.lineTo(200,200);
   context.lineTo(50,200);
   context.lineTo(50,50);
   // context.closePath();
   context.fillStyle = "blue";
   context.fill();

// context.beginPath();
   context.moveTo(50,250);
   context.lineTo(200,400);
   context.lineTo(50,400);
   context.lineTo(50,250);
   // context.closePath();
   context.fillStyle = "black";
   context.fill();


去掉代码中的注释，可以达到我们的预期效果

  • 绘制一个七巧板
    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
    30
    31
    var tangram = [
      {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
      {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
      {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
      {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
      {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
      {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
      {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
    ]
    window.onload = function() {
      var canvas = document.getElementById("canvas");
      canvas.height = 800;
      canvas.width = 800;
      var context = canvas.getContext("2d");
      for (var i=0;i < tangram.length;i++) {
        draw(tangram[i], context);
      }

    }
    function draw(piece, cxt) {
      cxt.beginPath();
      cxt.moveTo(piece.p[0].x, piece.p[0].y);
      for(var i=1;i<piece.p.length;i++){
        cxt.lineTo(piece.p[i].x,piece.p[i].y);
      }
      cxt.closePath();
      cxt.fillStyle = piece.color;
      cxt.strokeStyle = "black";
      cxt.fill();
      cxt.stroke();
    }

  • 画圆
    1
    2
    3
    4
    5
    6
    7
    8
    context.arc(
    	centerx, // 圆心x
        centery, // 圆心y
        radius,  // 半径
        startingAngle,  // 起始的角度
        endingAngle,    // 结束的角度
        anticlockwise   // 是否逆时针
    )

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.beginPath();
context.arc(200,200,100,0,1.5*Math.PI);
context.closePath(); // 去掉以后不会封闭图形 beginPath与closePath不需要成对出现
context.stroke();

context.lineWidth = 5;
context.fillStyle = "green";
context.beginPath();
context.arc(500,200,100,0,1.5*Math.PI);
context.closePath(); // 对fill没什么用 
context.fill();