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>