console
(function(){
var canvas = {},
image = {};
//获取canvas元素
canvas.obj = document.getElementById('myCanvas');
if(canvas.obj.getContext) {
//获取渲染上下文
canvas.ctx = canvas.obj.getContext('2d');
//设置画布大小为屏幕宽高
canvas.w = canvas.obj.width = document.body.clientWidth;
canvas.h = canvas.obj.height = document.body.clientHeight;
//新建一个image对象
var img = new Image();
//图像加载完后
img.onload = function() {
//把图像信息保存在image里面
image.obj = img;
image.w = img.width;
image.h = img.height;
image.x = parseInt(canvas.w/2 - image.w/2);
image.y = parseInt(canvas.h/2 - image.h/2);
//把图像绘制到画布坐标为(100,100)的地方
//drawImage (image, dx, dy)
//drawImage (image, dx, dy, dw, dy)
//drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh)
// s == source d == draw
canvas.ctx.drawImage(image.obj,image.x,image.y,image.w,image.h);
};
//设置image的source
img.src = 'http://img06.mifile.cn/v1/MI_55950AFBBEDCB/T1_WK_ByVT1R4cSCrK.png';
}
}())
<canvas id="myCanvas">您的浏览器不支持Canvas。</canvas>
body{background-color: #0c1328;position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
canvas{border: 1px dotted #fff}