h5使用canvas绘图 -凯发k8天生赢家一触即发

一、什么是canvas

canvas 是h5的一部分，允许脚本语言动态渲染图像。canvas 定义一个区域，可以由html属性定义该区域的宽高，javascript代码可以访问该区域，通过一整套完整的绘图功能（api）,在网页上渲染动态效果图。

二、canvas 能做什么

游戏：毫无疑问，游戏在html5领域具有举足轻重的地位。html5在基于web的图像显示方面比flash更加立体、更加精巧。

图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用html/css完成图标制作。当然，使用svg（可缩放矢量图形）来完成图表制作也是非常好的方法。

字体设计：对于字体的自定义渲染将完全可以基于web，使用html5技术进行实现。

图形编辑器：图形编辑器能够100%基于web实现。

其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与web融合，并且不需要任何插件。

三、canvas基本用法

使用必须先设置其width和height属性，指定可绘图区域大小,只指定宽高不添加样式或者绘制图像的话，在页面中将看不到该元素。

绘制图像的话，我们首先要取到canvas并调用getcontext()方法，然后传入上下文名字（2d/3d）,2d有两种基本绘图操作|填充(fillstyle)|描边(strokestyle)|，这两个属性默认值为#000

var draw = document.getelementbyid('draw');

//确认浏览器是否支持元素

if(draw.getcontext){

    var context = draw.getcontext('2d');

    //给context绘制红色的边框

    context.strokestyle = '#f00';

    //内部填充大草原的颜色

    context.fillstyle = '#0f0';

}

使用todata方法，可以导出元素上绘制的图像

var draw = document.getelementbyid('draw');

if(draw.getcontext){

    //显示图像，todata获取到的是一串base64的字符串

    var drawurl = draw.todata;

    var image = document.createelement('img');

    image.src = drawurl;

    document.body.appendchild(image);

}

绘制矩形，主要有三个方法，fillrect()为矩形填充颜色、strokerect()为矩形描边、clearrect()清除矩形。这三个方法都接收4个参数x/y/w/h，矩形的左上角坐标和宽高

var draw = document.getelementbyid('draw');

//确认浏览器是否支持元素

if(draw.getcontext){

    var context = draw.getcontext('2d');
    //绘制红色矩形,绿色描边

    context.fillstyle = '#f00';

    context.strokestyle = '#0f0';

    context.strokerect(10,10,50,50);

    context.fillrect(10,10,50,50);
    //绘制绿色矩形,红色描边

    context.fillstyle = '#0f0';

    context.strokestyle = '#f00';

    context.strokerect(10,10,50,50);

    context.fillrect(10,10,50,50);
    //在两个矩形重叠的地方清除一个小矩形

    context.clearrect(40,40,10,10);

}

绘制路径，通过路径可以创造出复杂的形状和线条，要绘制路径，首先要调用beginpath()方法，再通过以下方法来实际的绘制路径

arc(x,y,radius,startangle,endangle,conterclockwise)

(x,y)圆心坐标、radius半径、(startangle,endangle)起始角度和终止角度、conterclockwise顺时针(false)/逆时针(true)
moveto(x,y) 将游标移动到(x,y)，不画线。可以用来修改所谓的上一点坐标*
arcto(x1,y1,x2,y2,radius)

从上一点开始绘制一条曲线到(x2,y2),并且以给定的radius穿过(x1,y1)
lineto(x,y) 从上一点开始绘制一条直线，到(x,y)
rect(x,y,width,height)

从(x,y)开始绘制一个矩形，宽高为width、height。这个方法绘制的是矩形路径，而非strokerect()和fillrect()所绘制的独立的形状
//接下来绘制一个不带数字的时钟

var draw = document.getelementbyid('draw');

if(draw.getcontext){

    var context = draw.getcontext('2d');

    //开始路径

    context.beginpath();

    //绘制外圆

    context.arc(100,100,99,0,2*math.pi,false);

    //绘制内圆

    context.moveto(194,100);

    context.arc(100,100,94,0,2*math.pi,false);

    //绘制分针

    context.moveto(100,100);

    context.lineto(100,15);

    //绘制时针

    context.moveto(100,100);

    context.lineto(35,100);

    //描边路径

    context.stroke();

    context.strokestyle = '#f00';

}

6 . 绘制文本，主要有两个方法，filltext(),stroketext(),都接收四个参数|text(要绘制的文本)|x|y|最大像素宽度(可选)|，这两个方法都已下列三个属性为基础

 font文字样式，大小，字体等

 textalign 文本对其方式|start|end|left|right|center|

 textbaseline 文本的基线|top|hanging|middle|alphabetic|ideographic|bottom|      
 //在表盘绘制12点

 context.font = 'bold 12px arial';

 context.textalign = 'center';

 context.textbaseline = 'middle';

 context.filltext('12',100,20);  

7 . 变换

 rotate(angel) 围绕原点旋转图像angle弧度

 scale(scalex,scaley) 缩放图像，x*scalex,y*scaley  默认1

 translate(x,y) 将坐标原点移动到(x,y)
 var draw = document.getelementbyid('draw');

 if(draw.getcontext){

    var context = draw.getcontext('2d');

    //开始路径

    context.beginpath();

    //绘制外圆

    context.arc(100,100,99,0,2*math.pi,false);

    //绘制内圆

    context.moveto(194,100);

    context.arc(100,100,94,0,2*math.pi,false);

    //变换原点

    context.translate(100,100);

    //旋转表针

    context.rotate(1)

    //绘制分针

    context.moveto(0,0);

    context.lineto(0,-85);

    //绘制时针

    context.moveto(0,0);

    context.lineto(-65,0);

    //描边路径

    context.stroke();

    context.strokestyle = '#f00';

}    

8 . 绘制图像，drawimage()

 var img = document.getelementbytagnames('image')[0];

 context.drawimage(img,0,10,50,50,0,100,40,60);

 9个参数: 要绘制的图像 原图像|x|y|w|h|  目标图像|x|y|w|h|

9 . 阴影和渐变

 阴影主要是以下几个属性值

 shadowcolor

 shadowoffsetx : x轴阴影偏移量

 shadowoffsety : y轴阴影偏移量

 shadowblur : 模糊像素数，默认0，不模糊
 var context = draw.getcontext('2d');

 //设置阴影

 context.shadowcolor = 'rgba(210,210,210,.5)';

 context.shadowoffersetx = '5';
 渐变 创建一个新的线性渐变 createlineargradient()方法，有四个参数|x1|y1|x2|y2|分别为起点的坐标和终点的坐标

 var gradient = context.createlineargradient(30,30,70,70);

 gradient.addcolorstop(0,'#fff');    //0表示开始

 gradient.addcolorstop(1,'#000');    //1表示结束

 //使用定义好的渐变属性

 context.fillstyle = gradient;    //填充的时候放入渐变

 context.fillrect(30,30,50,50);
 创建一个放射渐变 createradialgradient(),六个参数|x1|y2|radius1|x2|y2|radius2|分别为第一个圆心和半径第二个圆心和半径，用法和线性渐变相同

10 . 使用图像数据，可以通过getimagedata()取得原始图像数据。四个参数|x|y|w|h|。每个imagedata对象有三个属性，width/height/data，data是一个数组，内部存着每一个像素的数据,每个元素的值介于0-255之间

 var imgdata = context.getimagedata(0,0,100,100);

 var data = imgdata.data,

     red = data[0],

     green = data[1],

     blue = data[2],

     alpha = data[3];
//实现一个灰色过滤器

var draw = document.getelementbyid('draw');

if(draw.getcontext){

    var context = draw.getcontext('2d');

    var img = document.getelementsbytagname('image')[0],

        imagedata,data,

        i,len,average,

        red,green,blue,alpha;

    //绘制原始图像

    context.drawimage(img,0,0,100,100);

    //获取图像数据

    imagedata = context.getimagedata(0,0,img.width,img.height);

    data = imagedata.data;

    for(i=0,len=data.length;i
        red = data[i];

        green = data[i 1];

        blue = data[i 2];

        alpha = data[i 3];

        //计算rgb的平均值

        average = math.floor((red green blue)/3);

        //设置颜色值

        data[i] = average;

        data[i 1] = average;

        data[i 2] = average;

    }

    imagedata.data = data;

    //把数据绘制在画布

    context.putimagedata(imagedata,0,0)

}

h5使用canvas绘图的相关教程结束。