zoukankan      html  css  js  c++  java
  • HTML5 Canvans(3) 调整Canvas画布大小和擦除

    //得到2D渲染上下文
    var cancans = document.getElementById("myCanvas");
    
    var width = cancans.getAttribute("width");
    var height = cancans.getAttribute("height");
    var context = document.getElementById("myCanvas").getContext("2d");
    
    var x = 40, y = 40;
    context.fillStyle = "blue"; //设置填充色
    context.fillRect(x, y, 55, 55);
      context.clearRect(x, y, 45, 45);
    
    var timeoutlRst;
    var resizeCavans = function () {
        //节流,防止频繁调用
        clearTimeout(timeoutlRst);
        setTimeout(SetCanvansSize, 500);
    }
    var SetCanvansSize = function () {
        var width = document.body.clientWidth;
        var height = $(window).get(0).innerHeight;//这里使用jquery的封装的方法得到高度
        cancans.width = width;
        cancans.height = height;
        context.fillStyle = "blue"; //设置填充色
        context.fillRect(0, 0, width, height);
    }
    window.onresize = resizeCavans;
    // cancans.setAttribute("width", 500); //设置canvans大小后所有设置样式会重置

     

  • 相关阅读:
    打开网页总结
    学期总结
    总结
    Sprint3
    Sprint2团队贡献分
    6.14
    典型用户与场景
    5种创建型模式
    JAVA 将接口的引用指向实现类的对象
    Java里的接口
  • 原文地址:https://www.cnblogs.com/FlyCat/p/2579971.html
Copyright © 2011-2022 走看看