HTML5 Canvas 贴图片示例

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 贴图片示例</title>
</head>

<body style="background-color: green;">
<canvas id="homeCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("homeCanvas");
var w = parseInt(window.innerWidth * 0.1);
canvas.width = w;
canvas.height = w;
//检测当前浏览器是否支持Canvas对象
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.fillStyle = 'hsla(242, 30%, 5%, .55)';
ctx.arc(w * 0.5, w * 0.5, w * 0.5, Math.PI * 2, 0); // 画一个圆
var img = new Image();
img.src = "./img/home.png";
img.onload = function() {
// 将图片画到canvas上面上去
ctx.drawImage(img, w * 0.16, w * 0.16, w * 0.68, w * 0.68);
}
ctx.closePath()
ctx.fill();
ctx.restore();
} else {
console.log('当前浏览器不支持canvas对象');
}
</script>
</body>

</html>