zoukankan      html  css  js  c++  java
  • HTML5 javascript修改canvas的大小

    方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别:

    window.onload = function(){
        canvas.height = 100;
        canvas.width = 200;
    }
    
    changeCanvasSize = function(){
        canvas.height = 100;
        canvas.width = 200;
    }

    方法2: 修改带固定的尺寸,这种方式跟第一种很相似,需要传递参数,这也没什么;

    changeCanvasSize = function(width, height){
        canvas.height = height;
        canvas.width = width;
    }

    方法3: 最想记载的一种方式,根据某个图片尺寸设定canvas的大小:

    var image = document.getElementById("image");
    
    canvas.width = image.width;
    canvas.height = image.height;

    方法4: 取的是javascript中加载的图片的大小,不能直接取image的大小是因为当执行完了image.src之后,这个图片加载是相对延迟的,也就是说这个时候的image的大小还是0*0。

    var image = new Image();
    
    window.onload = function(){
        image.src = "some/location/name.jpg";
    
        image.onload = function(){
            canvas.width = image.width;
            canvas.height = image.height;
        }
    
    }

    尤其是以上方法4,是自己的理解,不知对否。。。。

  • 相关阅读:
    python爬虫-execjs使用
    关于命令行操作数据库整理
    php项目整理之no1
    c++笔记整理
    php实战开发之自我整理(学习笔记)
    php之JavaScript
    html嵌入样式表
    php-css外边距
    The report for triangle problem
    An error in projects
  • 原文地址:https://www.cnblogs.com/voctrals/p/4128724.html
Copyright © 2011-2022 走看看