canvas学习笔记

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>

2.我们画曲线

首先画圆弧:

有两种方法:arc(x,y,radius,startAngle,endAngle,anticlockwise);//正常画法

                     arcTo(x1,y1,x2,y2,radius);//通过两个切线找到与两切线相切的相应半径的圆

应该很好理解每一个参数的意思,通过英语就能明白,anticlockwise表示石佛偶逆时针绘制,默认顺时针。

代码就不写了,和直线写法一样,

现在来看贝塞尔曲线,会用的就用吧,反正我就是试着用的那种。

quadraticCurveTo(cp1x,cp1y,x,y);

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

x,y为曲线的终点,cp1,cp2的那两个坐标都是控制点,还是跟直线的写法一样,不写代码了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值