Cet article présente comment superposer deux rectangles l'un sur l'autre en html5. Attention à utiliser un navigateur qui supporte le 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，并检测是否支持canvas
var elem = document.getElementById('myCanvas');
if (!elem || !elem.getContext) {
return;
}
// 得到可以画图的上下文context
var context = elem.getContext('2d');
if (!context) {
return;
}
// 分别设置阴影的偏移坐标，阴影的虚化程度，阴影的颜色，图形的填充颜色，以及绘制图形。
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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
L'installation de l'imprimante a échoué
Comment afficher les procédures stockées dans MySQL
orientéb
exigences de configuration matérielle du serveur Web
Comment configurer au mieux la mémoire virtuelle
Solution à l'échec du téléchargement de Win10
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
