canvas图形绘制

2023-03-07 14:21:42

前面的话

　　前面分别介绍了canvas的基础用法和进阶用法，本文将使用canvas的各种语法进行图形绘制

绘制线条

【绘制线条】

　　下面来尝试绘制一段线条

<canvas id="drawing" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

    //开始绘制

    context.beginPath();

    //将光标移动到(10,10)位置

    context.moveTo(10,10);

    //从(10,10)点开始绘制一条直线，到(100,100)为止

    context.lineTo(100,100);

    //线条宽度为5

    context.lineWidth = 5;

    //线条颜色为浅绿

    context.strokeStyle = "lightgreen";

    //绘制线条

    context.stroke();

}

</script>
canvas图形绘制

【绘制折线】

　　下面，更进一步，绘制多条折线

<canvas id="drawing" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

    context.beginPath();

    context.moveTo(10,10);

    context.lineTo(50,50);

    context.lineTo(10,100);

    context.lineWidth = 5;

    context.strokeStyle = "lightgreen";

    context.stroke();

    context.beginPath();

    context.moveTo(60,10);

    context.lineTo(100,50);

    context.lineTo(60,100);

    context.lineWidth = 5;

    context.strokeStyle = "lightblue";

    context.stroke();

    context.beginPath();

    context.moveTo(110,10);

    context.lineTo(150,50);

    context.lineTo(110,100);

    context.lineWidth = 5;

    context.strokeStyle = "pink";

    context.stroke();

}

</script>

【绘制闭合图形】

　　下面绘制四条线条，组合成一个闭合图形

<canvas id="drawing" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

    context.beginPath();

    context.moveTo(10,10);

    context.lineTo(110,10);

    context.lineTo(110,110);

    context.lineTo(10,110);

    context.lineTo(10,10);

    context.lineWidth = 10;

    context.strokeStyle = "lightgreen";

    context.stroke();

}

</script>

　　结果如下所示，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽

　　这时，需要使用clothPath()来闭合图形，而最后一笔可以不画出来

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

    context.beginPath();

    context.moveTo(10,10);

    context.lineTo(110,10);

    context.lineTo(110,110);

    context.lineTo(10,110);

    context.closePath();

    context.lineWidth = 10;

    context.strokeStyle = "lightgreen";

    context.stroke();

}

</script>

　　当然，如果只是画矩形，使用rect()或fillRect()方法更简单

绘制矩形

　　下面来绘制一个背景颜色为红色，尺寸为100*100，位置为(0,0)点的矩形

<canvas id="drawing" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

　　 context.fillStyle = 'red';

　　 context.fillRect(0,0,100,100);

}

</script>
canvas图形绘制

　　下面来绘制一个半透明的蓝色描边矩形，尺寸为100*100，位置在(0,0)点

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

　　 context.strokeStyle = 'rgba(0,0,255,0.5)';

　　 context.strokeRect(0,0,100,100);
}

</script>
canvas图形绘制

　　接下来，在(0,0)点绘制尺寸为100*100背景为半透明红色的矩形， 1s后在(50,50)点绘制尺寸为100*100，描边为半透明蓝色的矩形，1s后使用clearRect()清除矩形

<canvas id="drawing" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

    context.fillStyle = 'rgba(255,0,0,0.5)';

    context.fillRect(0,0,100,100);

    setTimeout(function(){

      context.strokeStyle = 'rgba(0,0,255,0.5)';

      context.strokeRect(50,50,100,100);

    },1000);

    setTimeout(function(){

      context.clearRect(0,0,300,150);

    },2000);

}

</script>
canvas图形绘制

绘制弧形

【绘制圆】

<canvas id="canvas">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var canvas = document.getElementById('canvas');

if(canvas.getContext){

    canvas.width = 1000;

    canvas.height = 200;

    canvas.style.width = '400px';

    var context = canvas.getContext('2d');

    context.lineWidth = 5;

    context.strokeStyle = '#058';

    for(var i = 0; i < 10; i++){

        context.beginPath();

        context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);

        context.closePath();

        context.stroke();

    }

}

</script>

【绘制圆角矩形】

　　圆角矩形的示意图如下所示

canvas图形绘制
<canvas id="canvas" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var canvas = document.getElementById('canvas');

if(canvas.getContext){

    var cxt = canvas.getContext('2d');

    var W = 300,H = 150;

    drawRoundRect(cxt,0,0,W,H,50);

    cxt.lineWidth = 10;

    cxt.stroke();

    function drawRoundRect(cxt, x, y, w, h, r){

        cxt.beginPath();

        //左上角

        cxt.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);

        //上侧

        cxt.lineTo(x+w-r,y);

        //右上角

        cxt.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);

        //右侧

        cxt.lineTo(x+w,y+h-r);

        //右下角

        cxt.arc(x+w-r,y+h-r,r,0,Math.PI/2);

        //下侧

        cxt.lineTo(x+r,y+h);

        //左下角

        cxt.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);

        cxt.closePath();

    }

}

</script>

【绘制弯月】

　　下面是一轮弯月的计算示意图

canvas图形绘制

　　下面将上面的视图变成更通用的函数封装，代码如下

<canvas id="drawing" style="border:1px solid black">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

if(drawing.getContext){

  var W = drawing.width = 200;

  var H = drawing.height = 200;

  var cxt = drawing.getContext('2d');

  function dis(x1,y1,x2,y2){

    return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));

  }

  function fillMoon(cxt,d,x,y,r,rot){

    cxt.save();

    cxt.translate(x,y);

    cxt.rotate(rot*Math.PI/180);

    cxt.scale(r,r);

    cxt.beginPath();

    cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);

    cxt.moveTo(0,-1);

    cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);

    cxt.closePath();

    cxt.restore();

  }

  fillMoon(cxt,2,100,100,100,0)

  cxt.fillStyle = '#fb5';

  cxt.fill();

}

</script>

复杂图形

　　下面基于线条、矩形和弧形，来绘制复杂图形

【绘制魔性图案】

　　设置为正方形的魔性图案，当坐标位置x或y变化1px时，宽度或高度需要变化2px

　　于是，得到下面代码

<canvas id="canvas" width=300 height=300 style="border: 1px solid #aaaaaa;">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var canvas = document.getElementById("canvas");

if(canvas.getContext){

  var context = canvas.getContext("2d");

  for(var i=0; i<=20; i++){

    drawRect(context, 0 + 15 * i, 0 + 15 * i, 300 - 30 * i, 300 - 30 * i);

  }

  function drawRect(cxt,x,y,width,height){

    cxt.beginPath();

    cxt.rect(x, y, width, height);

    cxt.lineWidth = 5;

    cxt.strokeStyle = "blue";

    cxt.stroke();

  }

}

</script>

【绘制五角星】

　　五角星可分为大圆和小圆两部分。大圆控制外侧5个点的坐标位置，小圆控制内侧5个点的坐标位置。下面是详细的角度分析

canvas图形绘制
<canvas id="canvas">

    <p>The canvas element is not supported!</p>

</canvas>

<script>

var canvas = document.getElementById('canvas');

if(canvas.getContext){

    var cxt = canvas.getContext('2d');

    var H = 100,W = 200;

    canvas.height = H;

    canvas.width = W;

    function drawStar(cxt,r,R,x,y,rotate){

        if(rotate == undefined){

            rotate = 0;

        }

        cxt.beginPath();

        for(var i = 0; i < 5; i++){

            cxt.lineTo(Math.cos((18 + i*72 - rotate)/180*Math.PI)*R + x,-Math.sin((18+i*72 - rotate)/180 * Math.PI) * R + y);

            cxt.lineTo(Math.cos((54 + i*72 - rotate)/180*Math.PI)*r + x,-Math.sin((54+i*72 - rotate)/180 * Math.PI) * r + y);

        }

        cxt.closePath();

        cxt.stroke();

    }

    drawStar(cxt,30,50,50,50);

}

</script>

【绘制螺旋线】

　　下面是制作螺旋线的示意图

canvas图形绘制

　　从圆心点开始，按照圆的公式向外移动，每次移动时，圆心角逐渐增大，半径逐渐增大

<canvas id="drawing" width="100" height="100"></canvas>

<script>

var drawing = document.getElementById('drawing');

if(drawing.getContext){

    var context = drawing.getContext('2d');

    var x = drawing.width/2;

    var y = drawing.height/2;

    var deg = 0;

    var r = 1;

    context.strokeStyle = 'red';

    context.lineWidth = 2;

    context.moveTo(x,y);

    for(var i = 0; i < 4800; i++){

        deg++;

        r+=0.01;

        context.lineTo(x+Math.cos(deg * Math.PI/180)*r,y+Math.sin(deg * Math.PI/180)*r);

    }

    context.stroke();

}

</script>
上一篇：scp基本使用方法


下一篇：ajax json 动态传值