Canvas API

#第六届英特尔杯全国大学生软件创新大赛博客征集#

Canvas API

 

概述


¦历史
    Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget)。在Canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG(Scalable Vector Graphics,可伸缩矢量图形)插件,或者只有IE才支持的VML(Vector Markup Language,矢量标记语言),以及其他一些稀奇古怪的JavaScript技巧。
    假设我们要在没有canvas元素的条件下绘制一条对角线--听起来似乎很简单,但实际上如果没有一套二维绘图API的话,这会是一项相当复杂的工作。HTML5 Canvas能够提供这样的功能,对浏览器端来说此功能非常有用,因此Canvas被纳入了HTML5规范。
SVG和CANVAS
SVG
Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间--这点被认为是一个缺陷。SVG图像却可以在不同的分辨率下流畅地缩放,并且支持点击检测(能检测到鼠标点击了图像上的哪个点)。
CANVAS
Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小。
为什么WHATWG的HTML5规范不使用SVG呢?尽管Canvas有明显的不足,但HTML Canvas API有两方面优势可以弥补:
1、不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好;
2、在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。
¦canvas是什么?
    在网页上使用canvas元素时,它会创建一块矩形区域(默认情况下该矩形区域宽为300像素,高为150像素),并通过javascript来自由控制它完成绘画和高级动画效果。
¦Canvas编程模型
1、获取其上下文(context)
2、在上下文中执行动作
3、将这些动作应用到上下文中
¦Canvas坐标
    canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y=0的点称作原点。

 

Canvas API


¦一条斜线
//取得canvas元素及其绘图上下文
            var canvas = document.getElementById('diagonal');
            var context = canvas.getContext('2d');

            // 用绝对坐标来创建一条路径
            context.beginPath();
            context.moveTo(70, 140);
            context.lineTo(140, 70);

            // 将这条线绘制到canvas上 
            context.stroke();
 
  效果图:

     


¦变换(translate函数)
    使用变换的好处是可重用代码,一般的变换规则是:绘制应从原点(坐标系中的0,0点)开始,应用变换(缩放、平移、旋转等),然后不断修改代码直至达到希望的效果。


用变换来实现上面的斜线:
 var canvas = document.getElementById('diagonal');
            var context = canvas.getContext('2d');

            //保存当前绘图状态
            context.save();

            // 向右下方移动绘图上下文
            context.translate(70, 140);

            //以原点为起点,绘制与前面相同的线段
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, -70);
            context.stroke();

            //恢复原有的绘图状态context.restore();
¦moveTo(x, y)与lineTo(x, y)
    moveTo(x, y):不绘制,只是将当前位置移动到新的目标坐标(x,y)。
    lineTo(x, y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。
    简而言之,上面两个函数的区别在于:moveTo就像是提起画笔,移动到新位置,而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。
  用canvas绘制一个梯形:
function createPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
 
           context.lineTo(-20, -80);
           context.lineTo(20, -80);
            context.lineTo(20, -80);
            context.lineTo(25, -50);
            context.closePath();
        }
        function draw() {
            var canvas = document.getElementById('trails');
            var context = canvas.getContext('2d');
 
            context.save();
            context.translate(130, 250);
 
            createCanopyPath(context);
            context.stroke();
            context.restore();
        }
效果图
 


¦绘制曲线
 var canvas = document.getElementById('trails');

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

 

            //保存canvas的状态并绘制路径

            context.save();

 

            context.translate(-10, 350);

            context.beginPath();

 

            //第一条曲线向右上方弯曲

            context.moveTo(0, 0);

            context.quadraticCurveTo(170, -50, 260, -190);

 

            //第二条曲线向右下方弯曲

            context.quadraticCurveTo(310, -250, 410,-250);

 

            //使用蓝色的粗线条来绘制路径

            context.strokeStyle = '#1C86EE';

            context.lineWidth = 20;

            context.stroke();

 

            //恢复之前的canvas状态
            context.restore();
 
    quadraticCurveTo函数绘制曲线的起点是当前坐标,带有两组(x,y)参数。第二组是指曲线的终点。第一组代表控制点(control point)。所谓的控制点位于曲线的旁边(不是曲线之上),其作用相当于对曲线产生一个拉力。通过调整控制点的位置,就可以改变曲线的曲率。在右上方再画一条一样的曲线,以形成一条路。

  效果图:

      

一个实例


¦如果不是深入研究canvas,能看懂基本代码便可,本例是我利用第三方的函数库的基础上开发。

 

作者


¦学校:北京航天航空大学

¦姓名:彭伟

¦E-mail:786800158@qq.com

¦新浪微博:Way-彭伟      http://weibo.com/pengway

¦微信号:w786800158

 

For more complete information about compiler optimizations, see our Optimization Notice.
Categories: