html5 实现如何将两个矩形相互叠加
发布时间：2020-07-24 编辑：jiaochengji.com
教程集为您提供html5 实现如何将两个矩形相互叠加等资源，欢迎您收藏本站，我们将为您提供最新的html5 实现如何将两个矩形相互叠加资源
本篇介绍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 实现如何将两个矩形相互叠加的详细内容，更多请关注教程集其它相关文章！
-->您可能感兴趣的文章：
html5 实现如何将两个矩形相互叠加
如何用canvas绘制矩形？canvas画矩形的两种方法介绍
关于HTML5 Canvas的事件处理
html5的canvas实现画出简单的矩形和三角形
用HTML5 Canvas来绘制三角形和矩形等多边形的方法
html5 canvas有什么用?HTML5最新的canvas元素详解
html5的新特性有哪些？html5新特性的总结
HTML5Canvas save如何保存恢复状态？
Canvas怎么使用
2017年６月10个html5的视频教程汇总
[关闭]