zoukankan      html  css  js  c++  java
  • Html5 Canvas学习之路(五)

    Canvas 图像(上)


    Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上。还可以裁切、拼贴图像数据,以显示用户需要的部分。此外,Canvas还提供了像素数据的存储功能,这样就能对其进行操作并且重绘到画布上。

    1.图像基础

    Canvas API提供对DOM定义的Image对象类型,在javascript中定义图像,创建JavaScript的方法: var image = new Image();,然后设置图像的源文件,只需要将URL指定给新建的Image对象的src属性即可。代码在调用图像之前,必须确认其已正确加载并且准备就绪。为此可以建立一个事件监听器,当图像的load事件触发时立即启动。

    一旦图片加载完成,有多种方法可以将其显示在屏幕上。Canvas提供了一个如下方法来将图像数据显示到画布上:

    • drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh);

    Image代表图片对象,sx,sy代表开始复制源图像上的“源位置”。sw和sh代表从(sx,sy)处开始取的矩形大小,dx和dx代表绘制到画布上的位置,dw,dh代表绘制到画布上的图像大小。
    以下代码展示了在画布上绘制图片的方法:

        var image = new Image();
        image.addEventListener('load',eventImageLoaded,false);
        image.src = 'img/1945.png';
        function eventImageLoaded() {
            context.drawImage(image,100,100,32,32,100,100,32,32);
        }
       

    2.帧式动画

    帧式动画是指一项类似的现代技术,通过绘制每一个大小相同的帧来模拟动画。Canvas 可以利用drawImage()函数以及两个拼版来做动画。

    需要创建一个count变量来作为计数器,并且还要创建一个计时循环。

    代码示例如下:

        var count= 20;
    
        var image = new Image();
        image.addEventListener('load',eventImageLoaded,false);
        image.src = 'img/timg.jpg';
        function eventImageLoaded() {
            StartUp();
        }
        function StartUp() {
            setInterval(drawScreen, 100);
        }
    
        drawScreen();
        function drawScreen() {
    
    
            context.lineWidth = 5;
            context.strokeRect(0,0,theCanvas.width,theCanvas.height);
    
            context.drawImage(image,count,20,135,80,100,100,135,90);
            count += 135;
            console.log(count);
            if (count > 587){
                count = 20;
            }
    
    
        }

    然后可以生成这样一个动画:

    图片描述

  • 相关阅读:
    POJ-1751 Highways---确定部分边的MST
    ZOJ-1586 QS Network---最小生成树Prim
    POJ-1861 Network---最小生成树
    ZOJ-1203 Swordfish---最小生成树
    POJ-3026 Borg Maze---BFS预处理+最小生成树
    POJ-1258 Agri-Net---MST裸题Prim
    Android异常与性能优化相关面试问题-ANR异常面试问题详解
    Android异常与性能优化相关面试问题-OOM异常面试问题详解
    热门前沿知识相关面试问题-android插件化面试问题讲解
    初始化对于类与接口的异同点深入解析
  • 原文地址:https://www.cnblogs.com/10manongit/p/12807767.html
Copyright © 2011-2022 走看看