HTML5新增核心工具——canvas

绘制之前的准备工作：

 

1.在body中加入canvas标签，设置它的id、width、height，当然也可以动态设置它的宽高。

 

 <canvas id="mycanvas" width="1200" height="500"></canvas>

2.获得canvas对象的上下文obj.getContext(par),par参数为“2d”,目前canvas只支持二维效果。

 

var ctx = document.getElementById("mycanvas").getContext("2d");

如此你便有了一张1200*500的“画布”和一支名为“ctx”的画笔，接下来我们从一些最简单的图形开始绘制。

 

 

 

 

 

示例代码如下：

 

复制代码

var ctx=document.getElementById("container").getContext("2d");

    

    ctx.fillStyle="blue";

    ctx.fillRect(10,10,200,100);

 

    ctx.lineWidth=10;

    ctx.strokeStyle="red";

    ctx.strokeRect(300,10,200,100);

复制代码

其中fill表示填充，stroke表示仅绘制边框。

 

同理fillRect表示实心矩形，strokeRect表示矩形边框，他们都有四个参数：x,y,w,h 分别为横纵坐标、宽、高。

 

fillStyle表示填充样式，strokeStyle表示边框样式。

 

lineWidth表示线宽。

 

 

 

 

需要注意的是，设置样式等应写在绘制图形之前，否则样式会渲染不上。

 

在绘制多个图形时，应该在绘制一个图形之前开绘制路径，定制完成后关闭绘制路径并绘制定制好的图形。例如上例标准写法应为：

 

复制代码

   var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.fillStyle="blue";

    ctx.fillRect(10,10,200,100);

    ctx.closePath();

    ctx.stroke();

 

    ctx.beginPath();

    ctx.lineWidth=10;

    ctx.strokeStyle="red";

    ctx.strokeRect(300,10,200,100);

    ctx.closePath();

    ctx.stroke();

复制代码

beginPath()开启绘制路径，closePath()闭合绘制路径，stroke()绘制定制图形。在之后的练习中一定要养成习惯，否则当绘制线条时就会发现由于未闭合绘制路径所出现的线条错连。

 

 

 

绘制线条：

 

示例代码如下：

 

复制代码

var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.moveTo(400,100);

    ctx.lineTo(300,200);

    ctx.lineTo(350,200);

    ctx.lineTo(250,300);

    ctx.lineTo(400,300);

    ctx.closePath();

    ctx.stroke();

复制代码

其中，moveTo表示将画笔移动到某个坐标上，lineTo指以画笔落点开始画到哪个位置。本次我们想要画一个简单的树冠   

 

 

可见，这里我们只画了一半。(400，100)位置为树顶，(400，300)位置为树底中部，线条自动闭合正是我们关闭绘制路径所产生的效果。

 

接下来我们把另一半画完，并给这棵树填充上绿色：

 

复制代码

 var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.fillStyle="green";

    ctx.moveTo(400,100);

    ctx.lineTo(300,200);

    ctx.lineTo(350,200);

    ctx.lineTo(250,300);

    ctx.lineTo(400,300);

    ctx.lineTo(550,300);

    ctx.lineTo(450,200);

    ctx.lineTo(500,200);

    ctx.lineTo(400,100);

    ctx.fill();

    ctx.closePath();

    ctx.stroke();

复制代码

注意写在最后的fill()为填充样式：

 

 

 

 

 

绘制圆形：

 

示例代码：

 

 var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.arc(200,200,100,0,360*Math.PI/180,true);

    ctx.closePath();

    ctx.stroke();

arc(x,y,r,starta,enda,anti);参数分别代表：圆心横、纵坐标，半径、起始角（需转换成弧度值）、终止角、绘制方向。

 

 

 

用canvas绘制圆，如果你是刚接触一定觉得很纠结，因为它的参数有很多都是相反的。这里为了大家不纠结，我多罗嗦几句。

 

起、止角的计算与我们数学上的角度计算不同，数学中的角度逆时针为正，而这里的起止角是以顺时针为正，也就是当你起角设为0度，止角设为120度。它是从右边水平位置向下旋转计算角度。

 

还有就是绘制方向上，true代表逆时针，false代表顺时针。晕了的同学看下面的例子：

 

 ctx.arc(200,200,100,0,120*Math.PI/180,true);

设起角为0，止角120。按数学上的思想应该是一个小于半圆的上半边的弧，而结果：

 

 

 

这里true表示逆时针绘制，所以绘出了的图形大于半圆。若改为false：

 

 

 

 

 

此时顺时针绘制出的图形小于半圆，这里大家应该也可以理解arc的角度计算方向是与数学相反的。要想画一个位于上方的小半圆？止角设为-120度，绘制方向true即可。

 

 

 

这里罗嗦这么多就是希望刚接触的朋友们少走弯路，不像我们研究半天。

 

 

 

绘制阴影：

 

复制代码

 var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.fillStyle="gray";

    ctx.shadowOffsetX=5;

    ctx.shadowOffsetY=5;

    ctx.shadowColor="gold";

    ctx.shadowBlur=5;

    ctx.fillRect(10,10,100,100);

    ctx.closePath();

    ctx.stroke();

复制代码

shadowOffsetX、shadowOffsetY表示阴影横、纵向偏移量，shadowColor表示阴影颜色，shadowBlur表示模糊等级。

 

由于在之前CSS3相关博文中已经讲了不少关于阴影的东西了，这里就一笔带过。依然需要注意的是，先设置样式，最后再绘制矩形，顺序反了效果会渲染不上。

 

 

 

 

 

绘制渐变：

 

线性渐变：

 

复制代码

   ctx.beginPath();

   var Color=ctx.createLinearGradient(500,500,500,0);

   Color.addColorStop(0.3,"orange");

   Color.addColorStop(0.5,"yellow");

   Color.addColorStop(1,"gray");

   ctx.fillStyle=Color;

   ctx.fillRect(0,0,1200,500);

   ctx.closePath();

   ctx.stroke();

复制代码

写法为：将ctx.createLinearGradient()赋值给一颜色变量，颜色变量可以添加多个渐变颜色，addColorStop其共有两个参数，1.偏移量（0-1）2.颜色。最后将颜色变量赋给fillStyle。

 

createLinearGradient()共有四个参数：1、2表示起始面，3、4表示终于面。

 

 

 

径向渐变：

 

复制代码

   ctx.beginPath();

        ctx.arc(500,300,100,0,360*Math.PI/180,true);

        var Color=ctx.createRadialGradient(500,300,30,500,300,100);

        Color.addColorStop(0,"red");

        Color.addColorStop(0.5,"orange");

        Color.addColorStop(1,"yellow");

        ctx.fillStyle=Color;

        ctx.fill();

        ctx.closePath();

        ctx.stroke();

复制代码

与线性渐变比较相似，不同的是其名为createRadialGradient()中有六个参数：1、2.渐变开始圆的圆心坐标，3.渐变开始圆的半径，4、5.渐变结束圆的圆心坐标，6.渐变结束圆的半径。

 

 

 

 

 

绘制文字：

 

复制代码

ctx.beginPath();

ctx.strokeStyle="gold";

ctx.fillStyle="bule";

ctx.font="50px 微软雅黑";

ctx.strokeText("hello world！",700,200);

ctx.font="30px 幼圆";

ctx.fillText("hello kitty？",700,300);

ctx.fill();

ctx.closePath();

ctx.stroke();

复制代码

fillText(text,x,y,[maxwidth])绘制字符串，text表示文字内容，x,y文字坐标位置。[maxwidth]可选，设置字符最大宽大防止溢出。font设置字体。

 

其它参数：

textAlign 设置文字水平对齐方式 value 为 start|end|left|right|center  默认值为start

textBaseline 设置文字垂直对齐方式 value 为 top|hanging|middle|alphabetic|ideographic|bootom  默认为alphabetic

大家有兴趣自己试试吧。

 

图片绘制：

呼.....写了半天终于写到正题了，相对于上面简单图形的绘制，图片绘制要用的更多一些，尤其是在游戏中。

这里介绍一种较简单的方法，首先在body中写上：

   <p class="hide">

        <img src="" id="myImg">

   </p>

将你想要绘制的图片先加入body中，然后将父级p隐藏，一个隐藏的p中可以放入一个项目中所有需要绘制的图片甚至是音频文件，就好像一个别人看不见的素材库。

 

然后：

 

 var ctx = document.getElementById("mycanvas").getContext("2d");

    var img=document.getElementById("myImg");

    ctx.beginPath();

    ctx.drawImage(img,x,y);

    ctx.closePath();

    ctx.stroke();

得到你想要绘制的图片对象，通过drawImage来绘制。这里drawImage()可以有3个参数，5个参数，9个参数。

 

3个参数：1.需要绘制的图片对象 2,3.图片坐标；

 

5个参数：1.需要绘制的图片对象 2,3.图片坐标 4,5.图片宽高；

 

9个参数：1.需要绘制的图片对象 2,3.绘制图片的横纵向切割点 4.横向切割宽度 5.纵向切割高度 6,7.切割好的图片坐标 8,9.切割好的图片宽高。