本篇介绍html5 实现如何将两个矩形相互叠加，注意要使用支持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>以上就是html5 实现如何将两个矩形相互叠加的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
908
