HTML5新增核心工具——canvas

原文:HTML5新增核心工具——canvas

Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素。

Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度,JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。

Canvas可以在浏览器中绘制出十分华丽的图形,比如:

HTML5新增核心工具——canvas

当然这应该算比较高级的用法了,本菜也不会=.=

Canvas一个很大的作用就是制作游戏,本文通过博主之前做的一个小游戏来从零介绍Canvas的用法,先展示下吧:

HTML5新增核心工具——canvas

OK,这就是用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表示线宽。

显示结果:

HTML5新增核心工具——canvas

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

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

   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指以画笔落点开始画到哪个位置。本次我们想要画一个简单的树冠,结果:

HTML5新增核心工具——canvas

可见,这里我们只画了一半。(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()为填充样式:

HTML5新增核心工具——canvas

 

绘制圆形:

示例代码:

 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);参数分别代表:圆心横、纵坐标,半径、起始角(需转换成弧度值)、终止角、绘制方向。

HTML5新增核心工具——canvas

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

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

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

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

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

HTML5新增核心工具——canvas

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

HTML5新增核心工具——canvas

 

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

HTML5新增核心工具——canvas

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

 

绘制阴影:

 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相关博文中已经讲了不少关于阴影的东西了,这里就一笔带过。依然需要注意的是,先设置样式,最后再绘制矩形,顺序反了效果会渲染不上。

HTML5新增核心工具——canvas

 

绘制渐变:

线性渐变:

   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表示终于面。

HTML5新增核心工具——canvas

径向渐变:

   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.渐变结束圆的半径。

HTML5新增核心工具——canvas

 

绘制文字:

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设置字体。
HTML5新增核心工具——canvas
其它参数:
textAlign 设置文字水平对齐方式 value 为 start|end|left|right|center  默认值为start
textBaseline 设置文字垂直对齐方式 value 为 top|hanging|middle|alphabetic|ideographic|bootom  默认为alphabetic
大家有兴趣自己试试吧。
 
图片绘制:
呼.....写了半天终于写到正题了,相对于上面简单图形的绘制,图片绘制要用的更多一些,尤其是在游戏中。
这里介绍一种较简单的方法,首先在body中写上:
   <div class="hide">
        <img src="" id="myImg">
   </div>

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

然后:

 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.切割好的图片宽高。

前两个比较好理解,第三种参数模式怎么用呢?这里举个例子:在最开始展示的游戏中,会走路的怪物并不是gif,而是如下的背景透明的PNG格式:

HTML5新增核心工具——canvas

HTML5新增核心工具——canvas

我们通过一定的时间间隔截取图片中不同的区域,连贯起来就成了动画的效果了。说起切割图片,学过Web性能优化的人很容易想起 Spirite,它就是通过把一网页上的所需的图片全部汇集到一张图上,用哪部分就截取哪部分。

扯远了,现在我们试着让这种绿怪物走起来:

 var ctx=document.getElementById("container").getContext("2d");
    var img=document.getElementById("myImg");
    var X=0;
    var countNum=0;
    function picRun(){
        ctx.clearRect(0,0,1200,1000);
        countNum++;
        if(countNum==10){
            X+=129;
            countNum=0;
        }
        if(X>=387){
            X=0;
        }
        ctx.beginPath();
        ctx.drawImage(img,X,0,129,135,100,100,129,135);
        ctx.closePath();
        ctx.stroke();
    }
    window.setInterval(picRun,30);

*** 首先加入图片,获取图片对象。分析下怪物走路那张图片,宽为515px,高为135px,也就是说每个单独的怪物宽为四分之一即129px,高为135px。

将横向切割点设为变量X,由于此图只需横切不需要纵切,纵向切割点设为常量,实际上做法一样。

在drawImage中填入参数,就本例而言只有横向切割点一个变量。通过setInterval来循环执行picRun函数,每30毫秒执行一次。countNum俗称计数器,在做游戏中比较常见,目的是为了控制图片的切换频率。

(由于一个游戏中通常有多个动作频率不同的对象,所以当然不能随便改变setInterval的执行频率。加入了计数器,就能很好的控制各个对象的动作频率了)

本例中图片切换频率为30*10即300毫秒一次,切换时横向切割点右移135px即怪物宽度,当横向切割点大于3个怪物宽度时回0坐标重新切割。

clearRect()是为了清除之前的图层,始终只显示一张图片,否则每次切出的新图会不停叠加。

结果:

HTML5新增核心工具——canvas

 

本文到此结束,下篇介绍HTML另一核心工具——本地存储,敬请期待。

HTML5新增核心工具——canvas,布布扣,bubuko.com

HTML5新增核心工具——canvas

上一篇:MVC – 9.mvc整体请求流程


下一篇:闲聊CSS之关于clearfix--清除浮动