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

 

附件大小
Image icon 1.jpg8.83 KB
Image icon 2.1.jpg4.18 KB
Image icon 2.jpg22.33 KB
Image icon 3.jpg70.62 KB
Image icon 3.jpg70.62 KB
Image icon 4.jpg5.49 KB
Image icon 5.jpg15.79 KB
Image icon 6.jpg21.64 KB
Image icon 8.gif46.07 KB
Image icon 22.jpg22.33 KB
Image icon 44.jpg5.49 KB
Image icon 55.jpg15.79 KB
有关编译器优化的更完整信息,请参阅优化通知

2 评论

顶部
Yi-cheng K.的头像

一直沒去花時間接觸
此篇讓我看一瞥Canvas

謝謝分享~

Maplewing的头像

Canvas真的看起來很不錯!!XD
不過看了Code覺得他的API畫圖方式有點複雜Orz....
之後再來多多研究Canvas好了!!

添加评论

有一个技术问题? 访问我们的论坛网站或软件产品有问题? 联系支持部门.