// 定义canvas的宽高
var canvasWidth = 800;  // 这里可以根据大屏的尺寸自行调整
var canvasHeight = 600; // 这里可以根据大屏的尺寸自行调整
 
// 获取canvas元素，并初始化context上下文
var canvas = document.getElementById('myCanvas');   // 根据id来获取canvas元素（这里用到了html5中的新特性）  
var context = canvas.getContext('2d');    // 获取2d绘图上下文  
 
// 监听window resize事件（当浏览器窗口大小改变时会执行此函数）  
window.onresize = function() {    

    // 适配大屏时将canvas宽高修改为window宽高  

    var windowWidth = document.documentElement.clientWidth;      // 先获得当前window的宽度(即浏览器窗口的宽度)  

    var windowHeight= document.documentElement.clientHeight;     // 同理也能够得出当前window的高度(即浏览器窗口的高度)

    // 修改canvas元素实际宽高为 window 的实际宽高

    canvas.width = windowWidth;                  // 因为是要在大屏中适配，所以要将canvas元素修改成window最新尺寸  

    canvas.height= windowHeight;                 // 同理也要将画布元素修改成最新尺寸 

 }