站長(zhǎng)資訊網(wǎng)本篇介紹html5 實(shí)現(xiàn)如何將兩個(gè)矩形相互疊加，注意要使用支持html5的瀏覽器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas Primer - Example: Drawing shadows</title> <script type="text/javascript"> window.addEventListener('load', function () { //得到canvas，并檢測(cè)是否支持canvas var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // 得到可以畫圖的上下文context var context = elem.getContext('2d'); if (!context) { return; } // 分別設(shè)置陰影的偏移坐標(biāo)，陰影的虛化程度，陰影的顏色，圖形的填充顏色，以及繪制圖形。 context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 4; context.shadowColor = 'red'; context.fillStyle = '#00f'; context.fillRect(20, 20, 150, 100); }, false); </script> </head> <body> <p><canvas id="myCanvas" width="300" height="150">Your browser does not have support for Canvas. </canvas></p> </body> </html>
