HTML5 Canvas绘图教程-优快云博客

本文链接：https://blog.youkuaiyun.com/docwangsir/article/details/82874771

canvas是HTML5中的新功能，它是一块，在你开辟的空间内部用代码画图。

而建立画布和画图是需要一些步骤的

canvas是布 context是各种笔

先看一个简单的代码

<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas=document.getElementById("canvas2d");//获取我们的画布。
    var ctx2d=canvas.getContext("2d");//画布中的内容获取，然后设为对象，我们可以对他进行操作。
    ctx2d.fillRect(30,50,100,50);
    ctx2d.strokeRect(100,30,100,50);
    ctx2d.clearRect(101,51,28,28);//画了两个矩形，然后清除了交融部分。
</script>

每一个我们要进行的canvas操作都必须有获取画布，和获取画布内容的操作。

然后还有一个问题就是，我们要预防老版本浏览器不支持canvas，所以要写一个if语句进行一下判断

<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas=document.getElementById("canvas2d");
    if(canvas.getContext)
    {
        var ctx2d=canvas.getContext("2d");
        ctx2d.fillRect(30,50,100,50);
        ctx2d.strokeRect(100,30,100,50);
        ctx2d.clearRect(101,51,28,28);
    }
</script>

getContext()中我们写的是2d是因为我们要画一个2d的平面图形。(当然还有3d的选项)

一.绘制矩形：

简单的代码就在上面有给出，然后这里体现了三个方法：
strokeRect(x,y,width,height):绘制矩形边框。

fillRect(x,y,width,height);绘制矩形并且填充。

clearRect(x,y,width,height);清除矩形区域的内容，其实是露出背景色。

x,y代表的是坐标，注意，这里的坐标是指canvas画布为平面的左上角为原点的坐标。width，height也就是所画矩形的宽和高。

二.绘制其他图形：

绘制其他图形需要一些其他流程，就像我们画画的时候，我们需要提笔，找位置，落笔开始画，收笔。

所以在canvas上面画的时候也需要这些步骤。

首先介绍一下这些步骤的代码：

<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas=document.getElementById("canvas2d");
    var ctx2d=canvas.getContext("2d");
//第一种方法开辟路径：
    ctx2d.beginPath();//开辟一条新路径，也就是提笔一样的步骤；
    ctx2d.moveTo();//把画笔移动，也就是找个位置的步骤，然后落笔于此。
    //......假设我们干了一堆事，画了点东西。
    ctx2d.closePath();//收笔的过程，停止画了
    ctx2d.fill();//这是对所画路径的操作，即填充。
    ctx2d.stroke();//这是对所画路径的另一种操作，即描边。描边和填充不是必要的，但是最好干这些事，会好看一些，也方便可视化。下面的方法也可以描边和填充。
//第二种方法开辟路径：
    var newPath=new Path2d();
    //.......我们干了很多事
    newPath.closePath();//同样也是关闭路径的收笔操作。
</script>

好了，接下来是利用我们开辟的路径去画图形的操作。

1.我们画直线

画直线的方法是lineTo(x,y);一般会与moveTo()；配合使用，另外还有画虚线的办法setLineDash();还有一个设置虚线偏移量的方法lineDashOffset();

<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas=document.getElementById("canvas2d");
    if(canvas.getContext)
    {
        var ctx2d=canvas.getContext("2d");
        for(var i=1;i<10;i++)
        {
            ctx.beginPath();
            ctx.lineWidth=i;//设置线宽；
            ctx.moveTo(10,10*i);//移笔
            ctx.lineTo(100,10*i);//画线
            ctx.stroke();//描边
        }//画了9条粗度逐渐增加的实线
        ctx.beginPath();
        ctx.lineWidth=1;
        ctx.setLineDash([5,10]);//5长的实线，10宽的空白，然后就这么循环的画线；
        ctx.moveTo(10,110);
        ctx.lineTo(300,110);
        ctx.stroke();


        ctx.beginPath();
        ctx.lineWidth=1;
        ctx.setLineDash([5,10，15]);//5长的实线，10宽的空白，15宽的实线，然后其实会是5宽的空白，然后10宽的实线。。。。。。然后就这么循环的画线；
        ctx.moveTo(10,110);
        ctx.lineTo(300,110);
        ctx.stroke();

        for(var i=1;i<10;i++)
        {
            ctx.beginPath();
            ctx.setLineDash([5,10]);
            ctx.lineDashOffset=i;//设置偏移量
            ctx.moveTo(10,10*i);
            ctx.lineTo(100,10*i);
            ctx.stroke();

        }
    }
</script>