Canvas系列学习之起始篇

html5里面最让人心动的技术,对我来说,canvas绝对是首选,它没出现之前,一切网页相关的游戏动画非flash莫属.

当canvas来临时,是时候用用新鲜的血液了.

---

Canvas入门

canvas的本质就是提供了一套前端可用的gui接口,包括画线,画方,画圆,画字等常用的gui功能,先来看看在浏览器端的引用

<canvas id="canvas" width=500 heigth=400></canvas>

这里要说下,canvas有元素大小与绘图大小之分,默认的绘图大小是300*150,假如不直接添加width,height时,启用默认值,假如在css样式表里设置width,height时,会造成意想不到的效果,因为canvas绘图承认的大小是它的绘图大小,跟元素本身大小关系不大,所以建议直接在html的元素标签上直接写上宽高,css样式表里不要设置宽高.

然后所有的绘图操作其实都是在canvas的绘图上下文中进行的,方法是调用canvas实例的getContext方法

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

以后基本上所有的绘画操作都在context上面进行

今天的任务是实现一个精灵图片的鼠标定位功能,效果图如下:

精灵图片的鼠标定位

先说下这里要用到的几个功能点

• 绘制背景网格线
• 绘制精灵图片
• 绘制参考线
• 定义鼠标事件

先来说说绘制背景网格线

网格线是横竖两方向铺满的,原理就是不断的在两方向上画线,保证线之前的间距,直到画满为止,先上一个画一条线的例子

// 设置描边的样式
context.strokeStyle = "#ccc";
// 设置绘制线的宽度
context.lineWidth = 0.5;
// 开始进入画线状态
context.beginPath();
// 移到起始点
context.moveTo(50, 50);
// 连到终点
context.lineTo(100, 100);
// 开始描边
context.stroke();

上面的代码就是画线的最基本实现,下面我们来看一个完整的实现背景网格的功能.

// 画背景线
function drawBackground(){
    var SPACE = 15,
        i = canvas.height,
        j = canvas.width;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.strokeStyle = 'lightgray';
    context.lineWidth = 0.5;
    while(i >= SPACE){
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(canvas.width, i);
        context.stroke();
        i -= SPACE;
    }
    while(j >= SPACE){
        context.beginPath();
        context.moveTo(j, 0);
        context.lineTo(j, canvas.height);
        context.stroke();
        j -= SPACE;
    }
}

然后我们来绘制精灵图片

使用drawImage方法可以画一个图片到绘图上下文中去,这里的图片资源点击这里获取,下载

// 画精灵图
function drawImg(){
    context.drawImage(img, 0, 0);
}

var img = new Image();
img.src = 'img/running-sprite-sheet.png';
img.onload = function(){
    drawImg();
};

然后实时的根据鼠标位置来画参考线

关于坐标,这里要说下,默认事件参数里的坐标是相对于文档的,所以在canvas里画坐标的话,需要转换一下,这里给出转换的代码

// 切换网页坐标为canvas坐标
function windowToCanvas(x, y){
    var bbox = canvas.getBoundingClientRect();
    return {
        x: x - bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top * (canvas.height / bbox.height)
    }
}

然后我们来根据当前坐标画两条互相垂直的参考线,代码如下:

// 画垂直线
function drawVertical(x){
    context.beginPath();
    context.moveTo(x + 0.5, 0);
    context.lineTo(x + 0.5, canvas.height);
    context.stroke();
}

// 画水平线
function drawHorizontal(y){
    context.beginPath();
    context.moveTo(0, y + 0.5);
    context.lineTo(canvas.width, y + 0.5);
    context.stroke();
}

// 画定位网格
function drawGuidelines(x, y){
    context.strokeStyle = 'rgba(0, 230, 0, .8)';
    context.lineWidth = 0.5;
    drawVertical(x);
    drawHorizontal(y);
}

上面就是定义一个水平和垂直的绘制方法然后定义一个总的方法来一起调用.

最后我们来定义我们的事件

这里定义canvas的mousemove事件,然后利用事件参数里的坐标信息实时的调用上面的绘制方法

canvas.onmousemove = function(e){
    var loc = windowToCanvas(e.clientX, e.clientY);
    drawBackground();
    drawImg();
    drawGuidelines(loc.x, loc.y);
    updatePrint(loc.x, loc.y);
}

其实canvas的绘图流程大概都分下面几步

• 设置描边,填充的样式信息
• 设置路径信息
• 开始描边或者填充

总结

canvas是一个比较好玩的技术,只要你有想像力,就可以画出任何东西出来,这个系列将会全面的讲解它的用法,尽请期待.